React setInterval の状態が正しく更新されないのはなぜですか?

React State フックと setInterval: 詳細

setInterval 内で React State フックを利用する場合、一般的な注意点に対処することが重要です。場合によっては、最初のレンダリング以降、状態が期待どおりに更新されないことがあります。

問題を理解する

問題の核心は、によってキャプチャされたクロージャにあります。 setInterval。 setInterval に提供されるコールバック関数は、レンダリング時に初期状態値にアクセスできます。ただし、後続のレンダリングでは useEffect() が呼び出されず、コールバック関数には古い状態値が残ります。これにより、setInterval コールバック内で時間が 0 のままになります。

解決策: 状態コールバック フォームを活用する

この問題を解決するには、状態の 2 番目の形式を使用します。コールバックを受け入れるフック。このコールバックは、現在の状態を引数として受け取ります。このフォームを利用すると、値を増やす前に最新の状態値にアクセスできます。

setTime(prevTime => prevTime + 1); // Corrected version

gt;追加の洞察

さらに詳しく知りたい場合は、Dan Abramov の洞察力に富んだブログをご覧ください。 post では、この問題に取り組むための別のアプローチを提供しています。より深く理解するために、詳しく調べることを強くお勧めします。

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