「setTimeout」呼び出しの直後に React の状態が更新されないのはなぜですか?

React で状態が更新されない: setTimeout の謎を探る

React の setState() メソッドは、更新に関してよく混乱の対象になりますすぐに状態。この特定のケースでは、開発者は状態が期待どおりに更新されないシナリオに遭遇します。

開発者は数値の配列 newDealersDeckTotal を持っており、reduce() を使用してこれを合計して合計します。次に、setTimeout 関数内で DealersOverallTotal の状態をこの合計に設定します。ただし、setTimeout の前後で状態値をログに記録すると、誤った結果が得られます。

この動作を理解する鍵は、setState() の非同期の性質にあります。状態をすぐに設定する必要があるように見えるかもしれませんが、このメソッドは非同期です。つまり、すぐには反映されない可能性のある状態の更新をスケジュールします。これが、setTimeout 関数の前後で状態をコンソールに記録すると異なる結果が生じる理由です。

この問題を解決するには、開発者は、状態の更新が完了した後に実行される setState() のコールバック関数を利用できます。このコールバック内にコンソール ログ ステートメントを配置することで、開発者はログが実行される前に状態が更新されることを保証します。修正されたコードは次のとおりです。

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

このソリューションでは、コンソール ログの実行時に状態が正確に反映され、期待どおりの結果が得られます。 React の setState() メソッドの非同期動作を理解すると、開発者が同様の状態更新の落とし穴を回避するのに役立ちます。

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