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

【问题标题】：React Typescript hook error - This expression is not callableReact Typescript 钩子错误 - 此表达式不可调用
【发布时间】：2020-08-16 00:15:00
【问题描述】：

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

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

Code here to test it

所以切换功能有一些错误但无法解决。一些帮助将不胜感激

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

【问题讨论】：

标签： reactjs typescript react-hooks next.js

【解决方案1】：

解决问题需要做两处改变

首先，要消除错误，您需要使用const assertion 之类的方式返回值

return [open, toggle, setOpen] as const;

Here is a Link 到 github issue 获取错误

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

Working DEMO

【讨论】：

它有效！非常感谢。我需要更多地研究 const 断言以完全理解它:)