javascript - clearInterval 没有在 useEffect 中停止我的计数器

Question

我正在尝试使用 setInterval和 clearInterval在 useEffect 内 react 钩子(Hook)。计时器按预期启动，但不会停止。
我正在分配 setInterval至intervalID然后调用clearInterval(intervalID)

  useEffect(() => {
    console.log(`isRunning changed to: ${state.isRunning}`); //isRunning changed to: start
    let intervalID;
    console.log(`initial interval is: ${intervalID}`); // initial interval is: undefined
    if (state.isRunning === "start") {
      intervalID = setInterval(() => {
        console.log(`interval is: ${intervalID}`); // interval is: 7
        console.log(`tic toc`);
        dispatch({ type: "tic-toc" });
      }, 1000);
    } else if (state.isRunning === "stop") {
      console.log("clearInterval stop!"); // when I set isRunning to stop, this log shows in the console, but the next line doesn't stop the timer.
      clearInterval(intervalID);
    }
  }, [state.isRunning]);

完整代码: https://github.com/LazaroFilm/pomodoro

Answer 1

我认为你不需要使用useState也不是 useRef intervalID 的 Hook .在 useEffect 之外声明但清除 useEffect 的清理功能中的间隔像这样钩

let intervalID;
useEffect(() => {
    if (isRunning) {
      intervalID = setInterval(() => {
        dispatch({ type: "tic-toc" });
      }, 1000);
    }
      return () => clearInterval(intervalID);
  }, [isRunning]);

每当 isRunning更改组件将卸载，并执行清理功能。所以，如果 isRunning已更改为 false那么计时器应该在卸载时停止，当它再次安装时，将不满足 if 语句中的条件来运行 setInterval，因此计时器保持停止状态。在我的代码中，我假设 isRunning是 bool 值(这是我喜欢的方式)，并假设它是从 state 中“解构”的我假设来自 useReducer钩。