React中使用intervalId调用clearInterval无法停止定时器如何解决

问题原因 #

1. intervalId 状态初始化值为10，属于无效的定时器ID，初始状态下执行clearInterval(10)无任何作用。
2. 闭包陷阱：useEffect依赖为空数组，仅在组件首次渲染时执行一次，内部引用的timer是首次渲染创建的版本，该版本中的intervalId永远指向初始值10，即使后续通过setIntervalId更新了状态，timer也无法获取到最新的定时器ID，导致清除操作失效。

修复方案 #

方案1：使用useRef存储定时器ID（更简洁，推荐）

useRef的current属性是可变引用，不受闭包快照影响，可以随时获取到最新的定时器ID：

const [currentCount, setCurrentCount] = React.useState(10);
// 用ref存储定时器ID
const intervalIdRef = React.useRef(null);

React.useEffect(() => {
  intervalIdRef.current = setInterval(timer, 1000);
  // 组件卸载时清除定时器
  return () => clearInterval(intervalIdRef.current);
}, []);

const timer = () => {
  setCurrentCount((prev) => {
    if (prev > 0) return prev - 1;
    if (prev === 0) {
      console.log("计时结束");
      clearInterval(intervalIdRef.current);
      return prev;
    }
  });
};

方案2：新增副作用监听currentCount变化

如果不想用ref，也可以新增单独的副作用逻辑，当计数到0时主动清除定时器：

const [currentCount, setCurrentCount] = React.useState(10);
// 初始化值改为null
const [intervalId, setIntervalId] = React.useState(null);

React.useEffect(() => {
  const id = setInterval(timer, 1000);
  setIntervalId(id);
  return () => clearInterval(id);
}, []);

// 新增监听计数的副作用
React.useEffect(() => {
  if (currentCount === 0 && intervalId) {
    clearInterval(intervalId);
  }
}, [currentCount, intervalId]); // 依赖项加入最新的状态值，避免闭包问题

const timer = () => {
  setCurrentCount((prev) => prev > 0 ? prev - 1 : prev);
};

内容的提问来源于stack exchange，提问作者Mehdi Faraji