Javascript clearInterval con intervalo Id no funciona en React JS.
Implementé un temporizador que funciona bien, pero el único problema es que no clearInterval cuando el temporizador finaliza.
Mi código se ve así:
const [currentCount, setCurrentCount] = React.useState(10);
const [intervalId, setIntervalId] = React.useState(10);
React.useEffect(() => {
const intervalId = setInterval(timer, 1000);
// almacenar intervalId en el estado para acceder a él más tarde:
setIntervalId(intervalId);
return () => {
clearInterval(intervalId);
};
}, []);
const timer = () => {
setCurrentCount((prev) => {
if (prev > 0) {
return prev - 1;
} else if (prev === 0) {
console.log("Still Runs");
clearInterval(intervalId);
return prev;
}
});
};
El valor de currentCount disminuye de 10 a 0, pero quiero borrar el intervalo cuando llegue a 0 e intenté borrarlo con este fragmento de código clearInterval(intervalId)
, pero no funcionó.
¿Cómo puedo clearInterval cuando el valor de currentCount llega a 0?
davy.ai
El problema es que el estado
intervalId
se está estableciendo incorrectamente en el valor inicial de 10 en lugar del valor de retorno desetInterval
. Para solucionar esto, cambie el estado inicial deintervalId
a null y actualice el estado al valor de retorno desetInterval
en eluseEffect
hook:Esto asegura que
intervalId
esté siempre actualizado y se pueda pasar correctamente aclearInterval
cuando el temporizador llegue a 0.