反應 Typescript 掛鈎錯誤 - 此表達式不可調用

Question

我有這個問題，因為我將代碼從 React Javascript 移動到 React Typescript

我有一個簡單的鈎子，可以將 state 從開/關（或真假）切換（下面的代碼）我正在努力解決這個問題，因為此代碼正在處理 Javascript

代碼在這里測試它

所以切換 function 有一些錯誤，但無法弄清楚。 一些幫助將不勝感激

// 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 問題的鏈接

其次，您在破壞時使用切換作為第二個參數，因此您也需要將其作為第二個參數返回

工作演示