☰

ReactでReact.useState(() => {})は可能ですか？質問する

tag-icon • tag-icon reactjs typescript default-value react-hooks
ReactでReact.useState(() => {})は可能ですか？質問する

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

サンプルコードはこちら:

// 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?

ベストアンサー1

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

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>

おすすめ記事