☰

Reactフックで`setState`コールバックを使用する方法 質問する

tag-icon • tag-icon reactjs react-hooks use-state
Reactフックで`setState`コールバックを使用する方法 質問する

React フックはuseStateコンポーネントの状態を設定するために導入されています。しかし、以下のコードのようにフックを使用してコールバックを置き換えるにはどうすればよいでしょうか。

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

状態が更新された後に何かしたい。

追加の処理を実行するために使用できることはわかっていますが、ビット コードを必要とする状態の以前の値をチェックする必要があります。フックuseEffectで使用できる簡単なソリューションを探しています。useState

ベストアンサー1

これを実現するにはフックを使用する必要がありますuseEffect。

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

最初の初期レンダリング中にuseEffectコールバックを無視したい場合は、それに応じてコードを変更します。

import React, { useEffect, useRef } from 'react';

const [counter, setCounter] = useState(0);
const didMount = useRef(false);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
  // Return early, if this is the first render:
  if ( !didMount.current ) {
    return didMount.current = true;
  }
  // Paste code to be executed on subsequent renders:
  console.log('Do something after counter has changed', counter);
}, [counter]);

おすすめ記事