Aquí está mi código. Cada vez que toco el botón de inicio, se espasma. ¡Cualquier ayuda sería apreciada! Quiero, cada vez que presiono el botón, un temporizador de 1 segundo para contar hacia atrás en función de la veracidad de isPlaying.
const [onBreak, setOnBreak] = useState(false) const [isPlaying, setIsPlaying] = useState(false) useEffect(() => { const timerFunc = setInterval(() => { setIsPlaying(!isPlaying); if (!onBreak) { if (sessionSec === 0 && sessionMin !== 0) { setSessionSec(59); setSessionMin(sessionMin - 1); } else if (sessionSec !== 0 && sessionMin !== 0) { setSessionSec(sessionSec - 1); } else if (sessionSec === 0 && sessionMin === 0) { setOnBreak(true); } } else if (onBreak) { if (breakSec === 0 && breakMin !== 0) { setBreakSec(59); setBreakMin(breakMin - 1); } else if (breakSec !== 0 && breakMin !== 0) { setBreakSec(breakSec - 1); } else if (breakSec === 0 && breakMin === 0) { setOnBreak(false); } } else { clearInterval(timerFunc); } }, 100); }, [isPlaying]); <button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>Si setIsPlaying(!isPlaying) llama a useEffect() , solo llame a setIsPlaying(1isPlaying) una vez en el onclick. También debe cambiar la duración del intervalo a 1000 para esperar un segundo, por ejemplo
const [onBreak, setOnBreak] = useState(false) const [isPlaying, setIsPlaying] = useState(false) useEffect(() => { const timerFunc = setInterval(() => { if (!onBreak) { if (sessionSec === 0 && sessionMin !== 0) { setSessionSec(59); setSessionMin(sessionMin - 1); } else if (sessionSec !== 0 && sessionMin !== 0) { setSessionSec(sessionSec - 1); } else if (sessionSec === 0 && sessionMin === 0) { setOnBreak(true); } } else if (onBreak) { if (breakSec === 0 && breakMin !== 0) { setBreakSec(59); setBreakMin(breakMin - 1); } else if (breakSec !== 0 && breakMin !== 0) { setBreakSec(breakSec - 1); } else if (breakSec === 0 && breakMin === 0) { setOnBreak(false); } } else { clearInterval(timerFunc); } }, 1000); }, [isPlaying]); <button onClick={() => setIsPlaying(!isPlaying)}>{isPlaying ? 'Pause': 'Play'}</button>