es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • La función “useState” no funciona correctamente la primera vez cuando se le proporciona una fecha como cadena al implementar un cronómetro.

La función “useState” no funciona correctamente la primera vez cuando se le proporciona una fecha como cadena al implementar un cronómetro.

05 Aug, 2023 Programación

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.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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í:

    useEffect(() => {
  setCurrentTime(Date.now().toString());
}, [currentTime]);

    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í:

    const startTimer = () => {
  setDisableStart(true);
  setDisableStop(false);
  const startTime = Date.now();
  let timeElapsed = 0;
  interval = setTimeout(() => {
    setCurrentTime((startTime + timeElapsed).toString());
    timeElapsed += 10;
    startTimer(); // llamada recursiva para seguir actualizando el tiempo
  }, 10);
};

    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.

Comments are closed.