web-dev-qa-db-ja.com

ReactでReact.useState（（）=> {}）することは可能ですか？

functionをmy Reactコンポーネントの状態として使用できますか？

ここにサンプルコード：

// TypeScript 
type OoopsFunction = () => void;

export function App() {
    const [ooops, setOoops] = React.useState<OoopsFunction>(
        () => console.log('default ooops')
    );

    return (
        <div>
            <div onClick={ ooops }>
                Show Ooops
            </div>

            <div onClick={() => {
                setOoops(() => console.log('other ooops'))
            }}>
                change oops
            </div>
        </div>
    )
}

しかし、機能しません... defaultOoopsは最初に呼び出され、change oopsをクリックすると、otrher ooopsは、Show Ooops再び。

どうして ？

コンポーネントの状態として関数を使用することは可能ですか？

または、Reactには、そのようなthe function stateを処理する特別な方法がありますか？

reactjstypescriptdefault-valuereact-hooks
12
eczn

フックを使用して関数を状態に設定することは可能ですが、状態は初期状態または更新された状態を返す関数で初期化および更新できるため、挿入したい関数を順に返す関数を提供する必要があります状態。

const { useState } = React;

function App() {
  const [ooops, setOoops] = useState(() => () => console.log("default ooops"));

  return (
    <div>
      <button onClick={ooops}>Show Ooops</button>

      <button
        onClick={() => {
          setOoops(() => () => console.log("other ooops"));
        }}
      >
        change oops
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
20
Tholle

ReactでのuseStateの実装は

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

これは、実際に関数をパラメーターとして使用でき、この関数はS型を返す必要があることを示しています。あなたの場合、Sはundefinedになります。これは、() => console.log(...)が何も返さないためですOoopsFunctionとして明示的に指定しましたが。

したがって、useStateを使用して関数を状態として保存する場合は、関数がundefinedではなく実際に関数を返すTholleのアプローチを実装する必要があります。

0
Peter Lehnhardt