React `setInterval` フックが状態を適切に更新できないのはなぜですか?

React の setInterval フック内の状態トラップ

setInterval 内で React の useState フックを利用する場合、潜在的な課題である状態の更新を認識することが重要です。期待どおりに反映されない可能性があります。

提供されたコード例では、試行にもかかわらず、時間状態を 1 秒ごとにインクリメントしようとすると、0 のままになります。これは、setInterval 内のコールバックが初期時間値に関連付けられており、後続の状態更新にアクセスできないためです。

解決策: useState を使用するコールバック フォーム

この問題を解決するには、useState のコールバック フォームを利用します。これにより、コールバックは更新前に現在の状態値にアクセスできるようになります。

setTime(prevTime => prevTime + 1); // Updates based on current state

実装の更新:

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

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

ボーナス: 代替アプローチ

フックによる setInterval の処理の詳細については、以下を参照してください。 Dan Abramov のブログ投稿では、ref や useReducer フックの使用などの代替方法が検討されています。

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