Estoy tratando de crear un temporizador simple con React, donde el botón de inicio inicia el temporizador y el botón de parada lo pausa. Sin embargo, esto da un comportamiento inesperado.
Primero haga clic en inicio, el temporizador cambia a 1 y se detiene, en el segundo clic oscila entre 1 y 2. No puedo entender por qué sucede esto. ¡Cualquier ayuda sería muy apreciada!
import { useState } from "react"; import "./styles.css"; export default function App() { const [time, setTime] = useState(0) let t; function startTime(){ t = setInterval(()=>{ setTime(time+1); },1000) } function stopTime(){ clearInterval(t); } return ( <div className="App"> <h1>{time}</h1> <button onClick={startTime}>Start</button> <button onClick={stopTime}>Stop</button> </div> ); }Como lo hizo, con el primer clic crea una función en la memoria que llamará a setTime(0+1) para siempre, ya que 0 es el valor del time cuando registró esa función en la memoria. Para tener la time actualizada, querrá pasar una función a setTime .
Además, para memorizar la referencia del intervalo, debe usar React ref , ya que una variable normal llegará a su valor inicial en cada renderizado. Aquí hay un ejemplo de trabajo en CodeSandbox y el código a continuación:
import { useState, useRef } from "react"; import "./styles.css"; export default function App() { const [time, setTime] = useState(0) const timerRef = useRef(); function startTime(){ timerRef.current = setInterval(()=>{ setTime(time =>time+1); },1000) } function stopTime(){ clearInterval(timerRef.current); } return ( <div className="App"> <h1>{time}</h1> <button onClick={startTime}>Start</button> <button onClick={stopTime}>Stop</button> </div> ); }