ReactJS番茄钟计时器useState未正常更新secondsLeft问题

你代码里计时器切换后数值错误，不是setSecondsLeft没执行，是三个逻辑问题导致的：

• 初始状态值单位不统一：初始化secondsLeft时直接用了newTimer.work（单位为分钟），没有乘60转成秒，和后续倒计时计算逻辑的单位不一致。
• useEffect重复执行覆盖状态：你的useEffect依赖项包含newTimer，当switchMode里调用setNewTimer切换模式时，会触发useEffect重新执行，而effect开头写死了secondsLeftRef.current = newTimer.work * 60; setSecondsLeft(secondsLeftRef.current);，直接把你刚设置的休息时长秒数覆盖回了工作时长。
• 状态更新异步特性的误判：你在setSecondsLeft之后立刻打印secondsLeft拿不到新值是React的正常机制，同一个闭包里拿到的永远是更新前的旧值，不代表更新操作失败。

1. 修正初始状态值，统一所有时间计算单位为秒
2. 移除useEffect里强制重置为工作时长的冗余逻辑，避免模式切换后的值被覆盖
3. 更新全局状态时使用函数式更新，规避闭包拿到旧状态值的问题
4. 切换模式时同步更新state和对应的ref值，保证interval回调里拿到的是最新值

替换对应核心代码即可：

// 修正初始值，统一转成秒
const [secondsLeft, setSecondsLeft] = useState(newTimer.work * 60);

const secondsLeftRef = useRef(secondsLeft);
const isPausedRef = useRef(isPaused);
const modeRef = useRef(newTimer.active);

function tick() {
  secondsLeftRef.current--;
  setSecondsLeft(secondsLeftRef.current);
}

useEffect(() => {
  // 同步ref最新值
  secondsLeftRef.current = secondsLeft;
  isPausedRef.current = isPaused;
  modeRef.current = newTimer.active;

  const interval = setInterval(() => {
    if (isPausedRef.current) return;
    if (secondsLeftRef.current === 0) {
      // 切换模式
      const nextMode = modeRef.current === 'work' ? 'break' : 'work';
      const nextSeconds = (nextMode === 'work' ? newTimer.work : newTimer.short) * 60;

      // 函数式更新避免闭包旧值问题
      setNewTimer(prev => ({...prev, active: nextMode}));
      modeRef.current = nextMode;
      // 同步更新state和ref
      setSecondsLeft(nextSeconds);
      secondsLeftRef.current = nextSeconds;
      return;
    }
    tick();
  }, 1000);

  return () => clearInterval(interval);
}, [newTimer, setNewTimer]);

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