probablemente una respuesta simple a mi problema, pero es una que no puedo entender. Mi cuenta regresiva sigue pasando de cero y en negativo, me gustaría que terminara cuando llegue a cero. ¿Qué estoy haciendo mal?
¡Gracias!
const [staticCountdown, setStaticCountdown] = useState(15); const [countdown, setCountdown] = useState(15); const setCount = (count) => { if (!props.timerActive) { setStaticCountdown(count); setCountdown(count); } }; useEffect(() => { let interval = null; if (props.timerActive) { interval = setInterval(() => { setCountdown(countdown => countdown - 1); }, 1000); } else if (!props.timerActive && countdown === 0) { clearInterval(interval); } return () => clearInterval(interval); }, [props.timerActive, countdown]);deberías cambiar
else if (!props.timerActive && countdown === 0)
dentro
(if (!props.timerActive || countdown === 0)
aquí hay un ejemplo basado en su código:
const { useEffect, useState } = React; function App(){ const [timerActive, setTimerActive] = useState(true); const handleTimerActive = () => { setTimerActive((prev) => !prev); }; return ( <div className="App"> <Timer timerActive={timerActive} /> <button onClick={handleTimerActive}> {timerActive ? "Stop" : "Run"} </button> </div> ); } function Timer(props) { const [countdown, setCountdown] = useState(15); useEffect(() => { let interval = null; if (props.timerActive) { interval = setInterval(() => { setCountdown((countdown) => countdown - 1); }, 1000); } if (!props.timerActive || countdown === 0) { clearInterval(interval); } return () => clearInterval(interval); }, [props.timerActive, countdown]); const handleReset = () => { setCountdown(15); }; return ( <div> <h1>{countdown}</h1> <button onClick={handleReset}>Reset</button> </div> ); } ReactDOM.render( <App/> , document.getElementById("root") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>