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

Posted 2023-02-22

【中文标题】React Typescript 钩子错误 - 此表达式不可调用

【英文标题】：React Typescript hook error - This expression is not callable

【发布时间】：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>
  );

【参考方案1】：

解决问题需要做两处改变

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

return [open, toggle, setOpen] as const;

Here is a Link 到 github issue 获取错误

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

Working DEMO

【讨论】：

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