Estoy trabajando en un componente React donde, al enviar el formulario, un temporizador toma la entrada de valor de un componente deslizante y comienza a contar hasta cero. Sin embargo, solo el temporizador se detiene después de 1 de la función setInterval en triggerClock(). No estoy seguro de qué hacer.
Mi componente React:
const Home = (props) => { let timeInMinutes; let timeInSeconds; const [time, setTime] = useState(0); const [minutes, setMinutes] = useState(0); const [seconds, setSeconds] = useState(0); const handleTimeChange = (event) => { setTime(event.target.value); }; const triggerClock = () => { const interval = setInterval(() => { if (minutes === 0 && seconds === 0) { clearInterval(interval); } if (seconds === 0) { setSeconds((sec) => sec + 59); setMinutes((min) => min - 1); } else { setSeconds((sec) => sec - 1); } }, 1000); return () => { clearInterval(interval); }; }; const handleFormSubmit = (event) => { event.preventDefault(); timeInMinutes = time; timeInSeconds = timeInMinutes * 60; setMinutes(timeInSeconds / 60); setSeconds(timeInSeconds % 60); triggerClock(); }; return ( <React.Fragment> <Header /> <Container maxWidth="xs" sx={{ textAlign: "center" }}> <Typography variant="h5">Set Time (Minutes)</Typography> <Box component="form" onSubmit={handleFormSubmit}> <Slider aria-label="Timer" valueLabelDisplay="auto" step={10} marks min={0} max={60} value={time} onChange={handleTimeChange} /> <Button type="submit">Submit</Button> </Box> <div> {minutes}:{seconds} </div> </Container> </React.Fragment> ); };Hay algunos problemas aquí; Primero, le sugiero que lea la excelente publicación de blog declarativa Making setInterval de Dan Abramov, que es una excelente manera de entender la complicada intersección de setInterval y React Hooks.
En primer lugar, estás poniendo demasiadas cosas en el estado React. Tus minutes y seconds pueden derivarse directa y trivialmente del time . No necesitamos que React los cuide por nosotros, son relevantes solo durante "este render". asi que:
const [time, setTime] = useState(0); const minutes = Math.floor(time / 60); const seconds = time % 60;En segundo lugar, en el espíritu de la cita de Dan:
"podemos describir el proceso en todos los puntos en el tiempo simultáneamente"
necesitamos saber y controlar si el temporizador está en cuenta regresiva o no:
const [timerRunning, setTimerRunning] = useState(false); ... const triggerClock = () => { setTimerRunning(true); };Tenga en cuenta que un beneficio adicional de esto es que ahora podemos hacer que nuestra GUI refleje el estado:
<Button disabled={timerRunning} type="submit">Submit</Button> Y finalmente, tenemos todas las partes necesarias para escribir un useEffect que englobará el setInterval con la cuenta regresiva deseada, se detendrá en el momento adecuado y limpiará el intervalo:
useEffect(() => { if (timerRunning) { const interval = setInterval(() => { setTime((oldTime) => { const newTime = oldTime - 1; if (newTime === 0) { setTimerRunning(false); } return newTime; }); }, 1000); return () => { clearInterval(interval); }; } }, [timerRunning]);