setInterval 没有检测到 React 中的 useState 变化

Question

我想制定一个算法，每次您登录页面时都会启动一个 5 分钟计数器，而当这个 5 分钟计数器进入时，我想每分钟执行一些操作。

我尝试使用 useEffect 启动 setTimeout 并设置一个标志值以了解 5 分钟何时结束：

const [initialTime, setInitialTime] = useState(true)
  useEffect(() => {
    console.log('starting counter');
    setTimeout(() => {
      setInitialTime(false)
      console.log('changing the time' + " - " + initialTime);
    }, 5000);
    
  }, [])
  

在它下面我添加了 setInterval 函数，我只想在上面的标志（initialTime 为真）时关闭它，否则不会。

 useEffect(() => {
    setInterval(() => {
      if (initialTime) {
        //some action
      }
    }, 1000);
  }, [])

在我的脑海中应该可以工作，但是 setInterval 的反应真的很奇怪，它没有检测到状态变化，这是一个示例日志，如果我将 setTimeout 设置为 5 秒并将 setInterval 设置为 1 秒：

true
true
true
true
changing the time - true
true

然后它继续，在这种情况下，setTimeout 甚至不会改变状态，但即使它改变了，setInterval 也不会检测到它并且它仍然会通过。 我需要帮助来完成算法。

Answer 1

在 `useEffect 中使用 setInterval 是 React Hooks 的一个已知问题。 Dan Abramov 写了一篇有用的博客文章，解释了如何解决它。 https://overreacted.io/making-setinterval-declarative-with-react-hooks/

关键是替换

useEffect(() => {
    setInterval(() => {
      if (initialTime) {
        //some action
      }
    }, 1000);
  }, [])

用这个：

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}