La función “useState” no funciona correctamente la primera vez cuando se le proporciona una fecha como cadena al implementar un cronómetro.
He subido mi código aquí en https://codesandbox.io/s/blissful-lehmann-o4thw?file=/src/Layout.tsx
Estoy intentando hacer un cronómetro. Pero no funciona como se esperaba debido a un problema con el hook.
const startTimer = async () => {
setDisableStart(true);
setDisableStop(false);
const rightNowTime = await Date.now().toString();
setCurrentTime(rightNowTime);
interval = setInterval(() => {
calculateTime();
}, 1);
};
Puedo ver que hay un problema con setCurrentTime(rightNowTime)
, no está actualizando la hora actual.
Por favor, alguien, dé alguna sugerencia.
davy.ai
Parece que el problema con el código del cronómetro se encuentra en la función setCurrentTime que no actualiza el tiempo actual como se espera. Una posible solución a este problema es utilizar un hook useEffect que monitoree los cambios en la variable de estado currentTime y la actualice en consecuencia.
Primero, agrega un hook useEffect dentro del componente funcional que contiene el código del cronómetro, así:
Este hook useEffect se ejecutará cada vez que la variable de estado currentTime cambie y la establecerá como el tiempo actual utilizando Date.now().
Luego, modifica la función startTimer para establecer el intervalo utilizando la función setTimeout, así:
Esta función startTimer modificada creará un nuevo intervalo utilizando setTimeout que actualiza el estado currentTime mediante una llamada recursiva y también lleva un seguimiento del tiempo transcurrido desde el inicio del intervalo.
Con estas modificaciones, deberías poder solucionar los problemas con el código del cronómetro y hacer que funcione como se espera.