React State フックで「setInterval」を使用すると予期しない動作が発生するのはなぜですか?-jsチュートリアル-php.cn

React State フックで「setInterval」を使用すると予期しない動作が発生するのはなぜですか?

Barbara Streisand

リリース： 2024-12-08 13:43:12

オリジナル

877 人が閲覧しました

Why Does Using `setInterval` with React State Hooks Cause Unexpected Behavior?

setInterval での React ステートフックの使用: ステート更新の問題を理解する

React では、setInterval 内でステートフックを使用すると、次の問題が発生する可能性があります。状態の更新。これは、setInterval に渡されたコールバック関数が初期状態値へのアクセスを保持し、後続の更新が反映されない場合に発生します。

問題

次の Clock コンポーネントを考えてみましょう。

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

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

ログイン後にコピー

問題は setTime コールバック関数にあります。後続のレンダリングで更新された値ではなく、最初のレンダリング時の時間変数を参照します。その結果、状態の更新は初期値に制限されます。

解決策

この問題を修正するには、状態フックのコールバックフォームを使用します。現在の状態値へのアクセス:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime((prevTime) => prevTime + 1); // Get the latest state value
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

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

ログイン後にコピー

これで、コールバック関数は最新の状態値を正しく使用し、時間が次のように更新されるようになります。

代替アプローチ

Dan Abramov はブログ投稿でフックを使用して setInterval を処理する他の方法を検討し、特定のシナリオに適した代替アプローチを提供しています。

以上がReact State フックで「setInterval」を使用すると予期しない動作が発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。