Javascript clearInterval 与间隔 Id 在反应 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 function 将能够引用间隔 ID，而无需在 state 中维护它。

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