React の状態が「setInterval」内で更新されないのはなぜですか?

setInterval 内で React 状態フックを使用すると状態が更新されない

React の新しいフック機能内で、Clock コンポーネントは時間値を表示するように設計されていますそれは毎秒増加します。タイマーの動作にもかかわらず、時間値は 1 で停滞したままです。

問題の原因

この問題の根本は、setInterval のクロージャにあります。このクロージャ内のコールバック関数は、時間変数の初期値にのみアクセスできます。 useEffect() 関数は最初のレンダリング後に実行されないため、コールバックは後続の時間値を受け取りません。

Time Value Access

したがって、時間変数は常にsetInterval のコールバックには初期値 0 が含まれます。

解決策: のコールバック形式を使用する状態フック

従来の setState メソッドと同様に、状態フックには 2 つのオプションがあります。1 つ目は更新された状態を受け取り、コールバック フォームは現在の状態を受け取ります。この問題を解決するには、コールバック フォームを利用し、setState コールバック内でインクリメントする前に最新の状態値を取得することをお勧めします。

代替アプローチ

Dan Abramov のブログ投稿フックでの setInterval の使用法を詳しく調べ、この問題に対するさまざまな解決策を示しています。読むことを強くお勧めします。

更新されたコード

以下のコードは、修正された実装を示しています。

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(prevTime => prevTime + 1); // <-- Change this line!
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (<div>Seconds: {time}</div>);
}

ReactDOM.render(<Clock />, document.querySelector('#app'));

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