React setState が状態をすぐに更新しないのはなぜですか?

React setState が古い状態を保持する

問題

この React アプリケーションでは、状態変数 (dealersOverallTotal) が正しく更新されていません。この問題は、setTimeout を使用して setState 呼び出しを遅らせた後でも解決しません。 console.log ステートメントで変数 total が正しい値を保持していることが確認されているにもかかわらず、dealersOverallTotal は変化しません。

解決策

根本的な原因は、setState メソッドの非同期の性質にあります。 console.log を使用して setState を呼び出した直後に状態を検査すると、古い状態値が取得されます。更新された状態にアクセスするには、setState に提供されるコールバック関数を利用できます。

this.setState({ dealersOverallTotal: total }, () => {
  console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1');
});

コールバック内では、更新された状態が利用可能であることが保証され、状態値の正確なロギングが保証されます。このプラクティスに従うことで、開発者は setState 呼び出し後にアクセスするときに状態が最新であることに自信を持って依存できます。

以上がReact setState が状態をすぐに更新しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。