带有间隔ID的Javascript clearInterval在反应js中不起作用

Question

我实现了一个可以正常工作的计时器，但唯一的问题是计时器结束时它不会清除Interval。

我的代码如下所示：

  const [currentCount, setCurrentCount] = React.useState(10);
  const [intervalId, setIntervalId] = React.useState(10);

  React.useEffect(() => {
    const intervalId = setInterval(timer, 1000);
    // store intervalId in the state so it can be accessed later:
    setIntervalId(intervalId);
    return () => {
      clearInterval(intervalId);
    };
  }, []);

  const timer = () => {
    setCurrentCount((prev) => {
      if (prev > 0) {
        return prev - 1;
      } else if (prev === 0) {
        console.log("Still Runs");
        clearInterval(intervalId);
        return prev;
      }
    });
  };

currentCount 的值从 10 减少到 0，但我想在它达到 0 时清除间隔，我试图用这段代码 clearInterval(intervalId) 清除它，但没有奏效。

currentCount的值达到0时如何清除Interval？

Answer 1

您的useEffect 挂钩在其依赖数组中缺少一个重要的依赖：timer。为了让您自己更简单，您可以将 timer 变量移到效果内部（除非您有充分的理由让它在外部）。这最终获得了额外的好处，timer 函数将能够引用间隔 ID 而无需将其保持在状态。

const [currentCount, setCurrentCount] = React.useState(10);

React.useEffect(() => {
  const timer = () => {
    setCurrentCount((prev) => {
      if (prev > 0) {
        return prev - 1;
      } else if (prev === 0) {
        console.log("Still Runs");
        clearInterval(intervalId);
        return prev;
      }
    });
  };
  const intervalId = setInterval(timer, 1000);

  return () => {
    clearInterval(intervalId);
  };
}, []);