Quiero hacer un temporizador de cuenta regresiva con botones de inicio, parada, reanudación y reinicio. Sin embargo, no pude entender por qué mi código no funciona. Supongo que el problema radica en la parte del temporizador, setInterval y clearInterval.
He adjuntado fragmentos de mi código a continuación.
La ayuda sería muy apreciada, gracias!
function Countdown() { const [ timerRunning, setTimerRunning ] = useState(false); const [ startTime, setStartTime ] = useState(0); const [ totalTime, setTotalTime ] = useState(0); var timer; const startTimer = () => { setTimerRunning(true); setStartTime(totalTime); setTotalTime(totalTime); timer = setInterval(() => { const remainingTime = totalTime - 1000; if (remainingTime >= 0) { setTotalTime(remainingTime); } else { clearInterval(timer); setTimerRunning(false); setStartTime(0); setTotalTime(0); } }, 1000); }; const stopTimer = () => { clearInterval(timer); setTimerRunning(false); };tienes que poner tu setInterval en React.useEffect echa un vistazo a esta publicación algunas sugerencias para tu código:
useState no cambia el valor inmediatamente. Por lo que su valor en realidad no está cambiando. Para evitar esto, use el gancho UseEffect .
useEffect(() => { let intervalid if (timerRunning){ intervalid = setInterval(() => { const remainingTime = totalTime - 1000; if (remainingTime >= 0) { setTotalTime(remainingTime); } else { clearInterval(intervalid); setTimerRunning(false); setStartTime(0); setTotalTime(0); } }, 1000); } return () => { clearInterval(intervalid) } }, [timerRunning,totalTime])