web-dev-qa-db-ja.com

React TypeScriptフックエラー-この式は呼び出すことができません

コードをReact JavaScriptからReact TypeScriptに移動したため、この問題が発生しています。

オン/オフ（またはtrue false）から状態を切り替えるこの単純なフックがあります（以下のコード）このコードはJavascriptで動作していたため、これに苦労しています

テストするためのコード

したがって、トグル関数にはエラーがありますが、それを理解することはできません。いくつかの助けをいただければ幸いです

enter image description here

// 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>
  );
}
reactjstypescriptreact-hooksnext.js
4
Héctor León

問題を解決するために必要な2つの変更

最初に、エラーを取り除くために、 const assertion のように

return [open, toggle, setOpen] as const;

ここにリンクがあります エラーのgithubの問題へ

2番目に、破壊中に2番目の引数としてトグルを使用しているため、2番目の引数としても戻す必要があります。

ワーキングデモ

7
Shubham Khatri