如何保存React秒表应用暂停时的当前计时变量以解决重启异常bug

问题根因 #

1. 你直接把cronoTime这个引用类型的对象存入printTime数组，数组里存储的是和当前状态同源的内存引用，后续cronoTime更新时，数组里已存入的值会同步变化，看起来就像被重置了。
2. start函数里直接修改cronoTime原state的值，违反了React state不可变的原则，会导致状态被意外污染。

修复方案 #

1. 修复Split存值逻辑

存入printTime时对当前cronoTime做浅拷贝，切断引用关联，修改handleClickSplit代码：

const handleClickSplit = () => {
  // 用扩展运算符生成新对象，避免引用同源
  setPrintTime((prevtime) => [...prevtime, {...cronoTime}]);
};

2. 修复start函数的状态更新逻辑

改用React state的函数式更新写法，避免直接修改原state，同时解决闭包导致拿不到最新状态的问题：

const start = () => {
  setCronoTime(prev => {
    const newTime = {...prev};
    if (newTime.ms === 100) {
      newTime.s++;
      newTime.ms = 0;
    }
    if (newTime.s === 60) {
      newTime.m++;
      newTime.s = 0;
    }
    if (newTime.m === 60) {
      newTime.h++;
      newTime.m = 0;
    }
    newTime.ms++;
    return newTime;
  });
};

修改完成后，暂停状态点击Split再重启计时，已经存入的分段时长不会再同步变化，秒表也会从暂停的位置继续计时，不会出现异常重置的问题。

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