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

Question

我实现了一个工作正常的计时器，但唯一的问题是当计时器结束时它没有清除间隔。

我的代码如下所示：

  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 时，如何清除间隔？

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);
  };
}, []);

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

Javascript clearInterval with interval Id doesn't work in react js

javascript

setinterval

clearinterval

reactjs