Estoy aprendiendo a reaccionar. Cuando hago clic en el botón de reinicio del temporizador, en lugar de reiniciar el temporizador, un nuevo segundo temporizador comienza a funcionar al mismo tiempo. Si hago clic en el mismo botón la tercera vez, un nuevo tercer temporizador comienza en cero y también se ejecuta al mismo tiempo.
Lo mismo sucede cuando hago clic en otro botón que dice Saltar 10 segundos. Es como si estuviera creando un nuevo estado en lugar de restablecer el estado.
Aquí está mi código app.jss
function App() { const [timeSpent, setTimeSpent] = useState(0); setTimeout(() => setTimeSpent(timeSpent + 1), 1000 ) //Reset the timer const resetTimer = () => setTimeSpent(0); return ( <> <Timer secondsPassed={timeSpent} /> <button onClick={resetTimer}>Reset Timer</button> <button onClick={() => setTimeSpent(timeSpent +10)}>Jump 10 Seconds</button> </> ); } export default App;Aquí está mi código Timer.js
function Timer({secondsPassed}) { const formatting = () => { if (secondsPassed < 60) { return secondsPassed + ' Sec'; } else { return Math.floor(secondsPassed/60) + ' Mins'; } } return ( <div> <h3>Time Spent: {formatting()}</h3> </div> ) }Según el comentario de @Emile Bergeron, debe usar setInterval dentro de useEffect y, para actualizar el estado, debe obtener el último timeSpent que se pasó a la función de devolución de llamada que pasé a setTimeSpent.
const {useState, useEffect} = React; function App() { const [timeSpent, setTimeSpent] = useState(0); useEffect(() => { setInterval(() => setTimeSpent((time) => time + 1), 1000); }, []); //Reset the timer const resetTimer = () => setTimeSpent(0); return ( <div> <Timer secondsPassed={timeSpent} /> <button onClick={resetTimer}>Reset Timer</button> <button onClick={() => setTimeSpent(timeSpent + 10)}> Jump 10 Seconds </button> </div> ); } function Timer({ secondsPassed }) { const formatting = () => { if (secondsPassed < 60) { return secondsPassed + " Sec"; } else { return Math.floor(secondsPassed / 60) + " Mins"; } }; return ( <div> <h3>Time Spent: {formatting()}</h3> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render( <App />, rootElement ); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>