番茄钟（Pomodoro Clock）onBreak变量不切换问题求助

问题现象 #

当sessionTime计时归零时，未将onBreak设为true，无法启动breakTime倒计时，页面h3文本始终显示"Session"，持续重复sessionTime循环。

问题原因 #

核心问题是闭包陷阱导致的状态快照过时：
在controlTime函数启动定时器时，局部变量onBreakVar被赋值为当时onBreak状态的快照值。定时器的回调函数会一直引用这个初始快照，不会随着组件onBreak状态的更新而同步变化。

举个例子：初始onBreak为false，onBreakVar也为false。当Session倒计时结束，代码执行onBreakVar = true并调用setOnBreak(true)，但这个onBreakVar是定时器内部的局部变量，下次定时器触发时，依然会使用最初捕获的false值，导致判断逻辑永远进入第一个分支，持续重置为sessionTime，无法切换到Break模式。

修复方案 #

方案一：使用useRef跟踪实时状态（推荐） #

通过useRef创建一个可以实时同步状态的引用，避免闭包带来的快照问题。

1. 添加状态同步的ref：

const onBreakRef = React.useRef(onBreak);

// 同步组件onBreak状态到ref
React.useEffect(() => {
  onBreakRef.current = onBreak;
}, [onBreak]);

2. 修改controlTime函数中的定时器逻辑：

const controlTime = () => {
  let second = 1000;
  let date = new Date().getTime();
  let nextDate = new Date().getTime() + second;
  
  if (!timerOn) {
    let interval = setInterval(() => {
      date = new Date().getTime();
      if (date > nextDate) {
        setDisplayTime((prev) => {
          if (prev <= 0 && !onBreakRef.current) {
            // playBreakAudio();
            setOnBreak(true);
            return breakTime;
          } else if (prev <= 0 && onBreakRef.current) {
            // playBreakAudio();
            setOnBreak(false);
            return sessionTime;
          }
          return prev - 1;
        });
        nextDate += second;
      }
    }, 30);
    localStorage.clear();
    localStorage.setItem("interval-id", interval);
  }
  
  if (timerOn) {
    clearInterval(localStorage.getItem("interval-id"));
  }
  setTimerOn(!timerOn);
};

额外修复点 #

代码中breakAudio的useState缺少React前缀，需修正：

const [breakAudio, setBreakAudio] = React.useState(new Audio("breakTime.mp3"));

修复逻辑说明 #

• useRef创建的onBreakRef会在组件onBreak状态更新时同步最新值，定时器内部可以获取到实时的模式状态，确保判断逻辑正确触发对应分支。
• 移除了局部变量onBreakVar，彻底避免闭包导致的状态快照过时问题。

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