React倒计时组件setInterval中IF Else失效问题排查与解决

问题根源 #

你的代码里出现定时器无法停止、time变为负值的核心原因是闭包陷阱：

• startTimer函数在组件首次渲染时执行，里面的setInterval回调捕获了当时的time状态初始值（10000）。
• 后续组件因time更新重新渲染时，这个回调函数始终持有首次渲染时的旧time值，永远不会触发time <= 0的判断逻辑，导致定时器持续运行，setTime不断减少数值最终出现负值。

解决方案 #

下面提供两种可靠的修复方式：

方案一：利用setTime的函数式更新获取最新值 #

直接在setTime的函数式参数中拿到最新的prevTime，在更新前判断是否已到0，同时停止定时器：

const startTimer = () => {
  // 先清除旧定时器，避免重复创建
  clearInterval(timerRef.current);
  setPause(false);
  timerRef.current = setInterval(() => {
    setTime((prevTime) => {
      if (prevTime <= 0) {
        clearInterval(timerRef.current);
        setPause(true);
        return 0; // 固定time为0，防止出现负值
      }
      return prevTime - 1000;
    });
  }, 1000);
};

方案二：用Ref跟踪最新的time值 #

新增一个Ref来同步time的最新状态，在定时器回调里用这个Ref做判断：

import { useEffect, useState, useRef } from "react";

export const Timer = () => {
  const [time, setTime] = useState(10000);
  const [pause, setPause] = useState(false);
  const timerRef = useRef(null);
  const currentTimeRef = useRef(time); // 新增Ref跟踪最新time

  // 同步time状态到Ref
  useEffect(() => {
    currentTimeRef.current = time;
  }, [time]);

  useEffect(() => {  
    startTimer();
    return () => clearInterval(timerRef.current);
  }, []);

  const stopTimer = () => {
    clearInterval(timerRef.current);
    setPause(true);
  };

  const startTimer = () => {
    clearInterval(timerRef.current); // 清除旧定时器
    setPause(false);
    timerRef.current = setInterval(() => {
      if (currentTimeRef.current <= 0) {
        clearInterval(timerRef.current);
        setPause(true);
      } else {
        setTime(prev => prev - 1000);
      }
    }, 1000);
  };

  // getFormattedText函数和return部分保持不变
};

额外优化 #

在startTimer开头添加clearInterval(timerRef.current)，可以避免用户多次点击"Start"按钮时创建多个定时器，导致倒计时速度异常的问题。

内容的提问来源于stack exchange，提问作者KABIR CHANDRIKAPURE