為什麼將 `setInterval` 與 React State Hooks 一起使用會導致意外行為？

在setInterval 中使用React State Hooks：了解狀態更新問題

在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 的其他方法，提供了可能適合特定場景的替代方法。

以上是為什麼將 `setInterval` 與 React State Hooks 一起使用會導致意外行為？的詳細內容。更多資訊請關注PHP中文網其他相關文章！