為什麼我的 React `setInterval` Hook 無法正確更新狀態？

React 的setInterval Hook 中的狀態陷阱

在setInterval 中使用React 的useState hook 時，意識到潛在的挑戰至關重要：狀態更新可能不會如預期般反映。

在提供的程式碼範例中，儘管嘗試增加時間每秒狀態一次，它仍然停留在 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>
  );
}

獎勵：替代方法

有關使用鉤子處理Interval多見解，請參閱Dan Abramov 的部落格文章，探討了替代方法，例如使用ref 或useReducer 掛鉤。

以上是為什麼我的 React `setInterval` Hook 無法正確更新狀態？的詳細內容。更多資訊請關注PHP中文網其他相關文章！