0
426
ViewsPor qué un `useEffect` simple no está tomando un valor actualizado cuando está distorsionando cualquier "setInterval/timeout" dentro
Por qué un useEffect simple no está tomando un valor actualizado cuando está deformando cualquier setInterval/timeout dentro;
where variable stopped to initial value; import { useState, useEffect } from "react"; let timerRef; const StopWatch = () => { const [time, setTime] = useState(0); const [isPause, setPause] = useState(false); useEffect(() => { timerRef = setInterval(() => { console.log({ time }); if (!isPause) { setTime(time + 1); } }, 5000); return () => clearInterval(timerRef); }, []); const startWatch = () => { setPause(false); }; const stopWatch = () => { setPause(true); }; return ( <> time: {time} <button onClick={startWatch}>Start</button> <button onClick={stopWatch}>stop</button> </> ); }; export { StopWatch }; 
·
Juan Pablo Isaza
3 answers
Answer question0
pasar la dependencia del tiempo y esto debería funcionar
useEffect(() => { let _time = time; console.log({ time }); timerRef = setInterval(() => { console.log({ _time }); if (!isPause) { setTime(_time + 1); } }, 5000); return () => clearInterval(timerRef); }, [time]);
·
Juan Pablo Isaza
Report
0
Esto se debe a que está accediendo al valor de time desde el cierre, y dado que está definiendo el controlador setTimeout solo una vez (en la inicialización), siempre se referirá a ese valor inicial para time . Sugiero, para este caso de uso, solo usar el actualizador de estado con devolución de llamada, y así le proporcionará un mecanismo para actualizar fácilmente el estado con el anterior, y al no acceder al estado directamente. Simplemente reescriba setTime(_time + 1) a setTime(prevTime => prevTime + 1)
·
Juan Pablo Isaza
Report
0
CodeSandbox ya te advirtió sobre eso.
·
Juan Pablo Isaza
Report
Answer question