如何以间隔更新状态保存当前数据的变量答案

【问题标题】：how to save a variable with the current data saved in an interval updating state如何以间隔更新状态保存当前数据的变量
【发布时间】：2021-09-09 18:43:15
【问题描述】：

我正在here 中构建一个典型的秒表/时钟应用程序。

问题：当单击Pause 按钮然后单击Split 按钮（打印经过的时间）然后重新开始时，秒表和打印的时间都会重新启动。那是因为我在 handleClickSplit 函数中节省了 Crono 时间。关于保存当前暂停时间以防止出现错误的最佳方法有什么想法吗？

这是图片

这是我的代码：

export default function Home({ enableCrono }) {
  const [cronoTime, setCronoTime] = useState({ h: 0, m: 0, s: 0, ms: 0 });
  const [printTime, setPrintTime] = useState([]);
  const [interv, setInterv] = useState();
  const [status, setStatus] = useState(0);
  // 0 => not running
  // 1 => start
  // 2 => pause
  // 3 => stop

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

  const handleClickStart = () => {
    start();
    setStatus(1);
    setInterv(setInterval(start, 10));
  };
  const handleClickStop = () => {
    clearInterval(interv);
    setStatus(3);
  };
  const handleClickPause = () => {
    clearInterval(interv);
    setStatus(2);
  };

  const handleClickClear = () => {
    clearInterval(interv);
    setStatus(0);
    setCronoTime({ h: 0, m: 0, s: 0, ms: 0 });
    setPrintTime([]);
  };

  const handleClickSplit = () => {
    setPrintTime((prevtime) => [...prevtime, cronoTime]);

【问题讨论】：

标签： javascript reactjs use-state

【解决方案1】：

您在 printTime 数组中保存了对相同 cronoTime 对象的引用。只需保存一个新对象，这样cronoTime 上的更改就不会传播到printTime 中的对象：

setPrintTime((prevtime) => [...prevtime, {...cronoTime}]);

【讨论】：

太棒了！非常感谢您的明确解释。