Estoy escribiendo una aplicación de temporizador simple y usando setInterval por primera vez. El proyecto está en mecanografiado de reacción y uso el enlace useReducer para administrar el estado.

El proyecto requiere dos temporizadores separados, sesión y descanso, lo que puede explicar parte del código. El proyecto también requiere un botón para iniciar y detener el temporizador, por lo tanto, estoy usando una sola función.

He redactado mi reductor y tipos porque el problema, según tengo entendido, no los involucra, sino un uso simple de setInterval que aún no entiendo.

Cuando se llama a la función startStopTimer por segunda vez, el ID de intervalo no está definido, aunque se declara globalmente.

 const App = () => { const [timerState, dispatch] = useReducer(timerStateReducer, initialTimerState ); let intervalID: NodeJS.Timer; const startStopTimer = () => { let name: string = timerState.session.count !== 0 ? 'session' : 'break'; if (timerState[name].running) { console.log('stopping timer' + intervalID); //reducer sets running boolean variable to false dispatch({type: ActionKind.Stop, name: name}); clearInterval(intervalID); } else { //reducer sets running boolean variable to true dispatch({type: ActionKind.Start, name: name}); intervalID = setInterval(() => { dispatch({type: ActionKind.Decrease, name: name}); }, 1000); } }; return ( //redacted JSX code <button onClick={startStopTimer}>Start/Stop</button> )

Intenté pasar onClick como una función de flecha (en lugar de una referencia, ¿creo?) Y se comporta de la misma manera. Intenté simplificar esto con useState, pero me encontré con otro conjunto de problemas con useState y setInterval, así que volví al enlace useReducer.

¡Gracias!