Estoy creando una aplicación de reloj simple con React. Actualmente, la función countDown() funciona, pero me gustaría que el usuario pueda detener/iniciar el reloj presionando un botón. Tengo un booleano de estado llamado en paused que se invierte cuando el usuario hace clic en un botón. El problema es que después de invertir el valor de paused , la referencia a paused dentro de la función countDown() pasada a setInterval() parece estar accediendo al valor predeterminado de paused , en lugar del valor actualizado.
function Clock(){ const [sec, setSecs] = useState(sessionLength * 60); const [paused, setPaused] = useState(false); const playPause = () => { setPaused(paused => !paused); }; const countDown = () => { if(!paused){ setSecs(sec => sec - 1) } } useEffect(() => { const interval = setInterval(() => { countDown(); }, 1000); return () => { clearInterval(interval); }; }, []); Supongo que tiene algo que ver con la naturaleza asíncrona de las llamadas a setState() en React y/o la naturaleza del alcance/contexto cuando se usan expresiones regulares. Sin embargo, no he podido determinar qué está pasando al leer la documentación relacionada con estos conceptos.
Puedo pensar en algunas soluciones que permitirían que mi aplicación funcione como deseo. Sin embargo, quiero entender qué está mal con mi enfoque actual. ¡Agradecería cualquier luz que alguien pueda arrojar sobre esto!
En su código, useEffect se llama solo una vez al montar el componente.
La función de cuenta regresiva registrada dentro tendrá su valor inicial en el momento en que se llame a useEffect/setInterval . Por lo tanto, paused solo tendrá el valor cuando monte inicialmente el componente. Debido a que no está llamando a countDown directamente o actualizando su valor dentro de su useEffect , no se actualiza.
Creo que podrías resolver este problema así:
interval.current = useRef(null); const countDown = () => { if(!paused){ setSecs(sec => sec - 1) } } useEffect(() => { clearInterval(interval.current); interval.current = setInterval(countDown, 1000); return () => { clearInterval(interval.current); }; }, [paused]); su useEffect depende del valor de paused ya que necesita crear un nuevo intervalo (con una función de cuenta regresiva diferente). Esto activará el useEffect no solo en el montaje, sino cada vez que se paused los cambios. Entonces, una solución sería borrar el intervalo y comenzar uno nuevo con una función de devolución de llamada diferente.
Editar : en realidad podría mejorarlo, ya que solo desea que se ejecute el intervalo si la función de cuenta regresiva realmente hace algo, por lo que esto también debería funcionar:
useEffect(() => { clearInterval(interval.current); if(!paused) { interval.current = setInterval(countDown, 1000); } return () => { clearInterval(interval.current); }; }, [paused]);