React Typescript 钩子错误 - 此表达式不可调用

Question

我有这个问题，因为我将代码从 React Javascript 移动到 React Typescript

我有一个简单的钩子，可以从开/关（或真假）切换状态（下面的代码）我正在努力解决这个问题，因为这段代码正在处理 Javascript

代码在这里进行测试

所以切换功能有一些错误，但无法弄清楚。一些帮助将不胜感激

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

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

我的开关组件

// 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>
    </>
  );
};

现在我使用我的开关组件

// 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>
  );
}

Answer 1

你需要做两个改变来解决问题

首先，要摆脱错误，您需要const assertion像这样返回值

return [open, toggle, setOpen] as const;

这是错误的 github 问题链接

其次，您在销毁时使用切换作为第二个参数，因此您也需要将其作为第二个参数返回

工作演示