為什麼我的 React 狀態不在 `setInterval` 內更新？

在setInterval 中使用React State Hook 時狀態不更新

在React 的新Hooks 功能中，時鐘組件設計用於顯示時間值每秒都在增加。儘管計時器運行，時間值仍停留在 1。

問題的原因

這個問題的根源在於 setInterval 的閉包。此閉包中的回呼函數只能存取時間變數的初始值。由於 useEffect() 函數在第一次渲染後不會執行，因此回呼不會接收後續時間值。

時間值存取

因此，時間變數總是setInterval 的回調中攜帶初始值 0。

解決方案：使用State 的回呼形式Hooks

與傳統的setState 方法類似，狀態鉤子提供兩個選項：第一個接受更新的狀態，而回調形式接收目前狀態。要解決此問題，建議使用回調形式並在 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中文網其他相關文章！