`setState` の更新が React コンポーネントにすぐに反映されないのはなぜですか?

React の setState: 非同期更新のナビゲート

Background:

React では、setState( ) は、コンポーネントの状態を更新するために使用されます。ただし、setState() は常に即時であるわけではないことに注意することが重要です。これは非同期で実行される可能性があり、状態値に不一致が生じる可能性があります。

具体的な問題:

問題に直面しているユーザーは、setState() を使用して状態更新の不一致を報告します。コンポーネントメソッドで。具体的には、setState() の後に状態にアクセスする console.log ステートメントが、意図した更新値を常に反映するとは限らないことを観察しました。

コード スニペット:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return 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() の。最初の console.log が実行されたとき、状態はまだ更新されていません。したがって、不正な値がログに記録されます。

解決策:

これを解決するには、setState() によって提供されるコールバック関数を使用して、更新後の状態にアクセスすることをお勧めします。更新が完了しました。

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

この改訂されたコード スニペットでは、2 番目の console.log がコールバック内にネストされています。 関数。これにより、状態が更新されて正しい値が提供された後にのみ実行されることが保証されます。

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