如何将当前数据保存在间隔更新状态下的变量

Question

我正在 here 中构建一个典型的 stopwatch/clock 应用程序。

问题：当单击 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]);

Answer 1

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

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

如何将当前数据保存在间隔更新状态下的变量

how to save a variable with the current data saved in an interval updating state

javascript

reactjs

use-state