0
104
Viewscómo guardar una variable con los datos actuales guardados en un estado de actualización de intervalo
Estoy construyendo una aplicación típica de cronómetro/reloj aquí .
El problema: al hacer clic en el botón Pause , luego en el botón Split (que imprime el tiempo transcurrido) y luego comenzar de nuevo, tanto el cronómetro como el tiempo impreso se reinician. Eso es porque estoy ahorrando el tiempo de Crono en la función handleClickSplit . ¿Alguna idea sobre la mejor manera de ahorrar ese tiempo de pausa actual para evitar el error?
esta es la imagen
Este es mi código:
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]);
·
Juan Pablo Isaza
1 answers
Answer question0
Está guardando en su matriz printTime una referencia al mismo objeto cronoTime . Simplemente guarde un nuevo objeto, para que los cambios en cronoTime no se propaguen al objeto en printTime :
setPrintTime((prevtime) => [...prevtime, {...cronoTime}]);
·
Juan Pablo Isaza
Report
Answer question