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

React の setState メソッドの非同期の性質を理解する

React では、setState メソッドはコンポーネントの状態を更新する際に重要な役割を果たします。ただし、setState はコンポーネントの状態をすぐには変更しないことに注意することが重要です。代わりに、状態の更新をスケジュールし、実際の更新は非同期で行われます。

setState のこの非同期動作については、React のドキュメントで説明されています。

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

したがって、setState がコンポーネント内で呼び出されるとき、コールバック (提供されたコードの handleChange など) を呼び出した場合、そのコールバックのスコープ内では更新された状態をすぐには利用できません。これが、handleChange コールバック内の 2 番目の console.log が this.state.value の元の値を出力する理由です。

状態変更が発生した後に関数が確実に実行されるようにするには、関数をコールバックとして渡す必要があります。 to setState:

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
});

このアプローチでは、提供されたコールバック関数は状態が更新された後にのみ実行され、正しい値が確実にログに記録されます。コンソール。

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