reactjs - React Typescript-hookfel - Detta uttryck är inte anropbart

Jag har haft detta problem sedan jag flyttade koden från React Javascript till React Typescript

Jag har denna enkla hook som växlar tillstånd mellan på/av (eller sant/falskt) (kod nedan) Jag har problem med detta eftersom denna kod fungerade i Javascript

Koda här för att testa det

Så toggle-funktionen har ett fel men jag kan inte lista ut det. Lite hjälp skulle uppskattas mycket

// useToggle.tsx
import { useState } from "react";

export const useToggle = (initialMode = false) => {
  const [open, setOpen] = useState(initialMode);
  const toggle = () => setOpen(!open);
  return [open, setOpen, toggle];
};

Min strömbrytarkomponent

// Switch.tsx
import { useToggle } from "./useToggle";

import React from "react";

export const Switch = () => {
  const [open, toggle] = useToggle();
  const [open2, toggle2] = useToggle();
  return (
    <>
      <p>Testing toggle 1: {`${open}`}</p>
      <p>Testing toggle 2: {`${open2}`}</p>
      <button
        onClick={() => {
          toggle();
        }}
      >
        Toggle 1
      </button>
      <button
        onClick={() => {
          toggle2();
        }}
      >
        Toggle 2
      </button>
    </>
  );
};

Och nu använder jag min switchkomponent

// App.tsx
import * as React from "react";
import "./styles.css";
import { Switch } from "./Switch";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Switch />
    </div>
  );
}

Svar #1

Två förändringar du behöver göra för att lösa problemet

Först, för att bli av med felet behöver du returnera värdet med const assertion som

return [open, toggle, setOpen] as const;

Här är en länk till GitHub-ärendet för felet

och för det andra använder du toggle som det andra argumentet vid destrukturering, så du behöver returnera det som det andra argumentet också

Fungerande DEMO

Relaterade artiklar