React中向timeArr数组插入seconds值时首次插入为0的问题

你遇到的首次插入seconds为0的问题，核心原因是闭包陷阱：绑定键盘事件的useEffect仅依赖spaceEventCounter，当spaceEventCounter变为2时，事件处理函数handleKeyDown捕获的seconds还是组件初始渲染时的0，而非计数器运行后的最新值——因为此时组件没有因为seconds更新而重新执行这个useEffect，闭包里的seconds始终是旧值。

这里提供两种实用的解决思路：

方案1：使用useRef实时同步seconds值（推荐） #

useRef的.current属性是可变的，不受闭包限制，能始终保存最新的seconds值：

1. 定义ref并初始化为0：

const secondsRef = useRef(0);

2. 在更新seconds的定时器逻辑里，同步更新ref的值：

useEffect(() => {
  let interval;
  if (isRunning) {
    interval = setInterval(() => {
      setSeconds(prevSeconds => {
        const newSeconds = Number((prevSeconds + 0.01).toFixed(2));
        secondsRef.current = newSeconds; // 同步最新值到ref
        return newSeconds;
      });
    }, 10);
  } else {
    clearInterval(interval);
  }
  return () => clearInterval(interval);
}, [isRunning]);

3. 在handleKeyDown中使用secondsRef.current替代seconds：

if (spaceEventCounter === 2) {
  setIsRunning(false);
  setTimeArr([...timeArr, secondsRef.current]); // 用ref的最新值
  setSpaceEventCounter(3);
}

方案2：扩展事件绑定的依赖数组 #

把seconds和timeArr加入到绑定事件的useEffect依赖中，确保每次seconds更新时，事件处理函数能捕获到最新值：

useEffect(() => {
  // ... 原handleKeyDown和handleKeyUp逻辑不变
}, [spaceEventCounter, seconds, timeArr]);

⚠️ 注意：这种方法会因为seconds每秒更新100次，导致事件频繁绑定/解绑，可能存在性能损耗，因此更推荐方案1。

你当前的定时器逻辑中，每次加0.01用toFixed(2)可能会有精度问题（比如多次累加后出现小数位偏差），可以考虑改用整数计数（比如计数毫秒数，最后除以100转换为秒），避免浮点运算误差：

const [milliseconds, setMilliseconds] = useState(0);
// 定时器逻辑
interval = setInterval(() => {
  setMilliseconds(prev => prev + 10);
}, 10);
// 需要显示或使用秒数时转换
const seconds = milliseconds / 100;

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