React で setState() を呼び出した直後に更新された状態値にアクセスするにはどうすればよいですか?

React の状態伝播の難問

React の setState() メソッドは、更新された状態値を更新直後に取得しようとすると課題を引き起こします。これは、setState() の非同期の性質によるものです。

次のコードを考えてみましょう:

let total = newDealersDeckTotal.reduce((a, b) => a + b, 0);

console.log(total, 'tittal'); // Outputs correct total
setTimeout(() => {
  this.setState({ dealersOverallTotal: total });
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); // Outputs incorrect total

ここでの問題は、setState() 呼び出しが非同期であることです。これは、2 番目の console.log ステートメントが実行されるとき、状態がまだ更新されていないことを意味します。

これに対処するには、コールバック パターンを使用できます。これには、状態の変更が完了すると実行されるコールバック関数を setState() に渡すことが含まれます。

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

このアプローチを採用すると、コンソール ログ ステートメントは状態が更新された後にのみ実行され、確実に状態が更新されます。正しい値が表示されていることを確認します。

以上がReact で setState() を呼び出した直後に更新された状態値にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。