En mi código tengo algunos problemas con los intervalos. tengo una situacion asi
import { useState } from 'react'; function App() { const [count, setCount] = useState(0); function handleClick() { const timer = setInterval(() => { if (count >= 10) { clearInterval(timer); } else { setCount((prevCount) => prevCount + 1); } }, 1000); } return ( <> <button onClick={handleClick}>start</button> <p>{count}</p> </> ); } export default App; lo que intento hacer es iniciar un intervalo cuando el usuario hace clic en un botón y detenerlo cuando el contador llega a 10, pero nunca se detiene y el depurador dice que dentro setInterval recuento siempre es 0. ¿Alguien sabe cuál es el problema? También descubrí que si reescribo componente a componente de class como este
class App extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; } handleClick() { let myInterval = setInterval(() => { if (this.state.count >= 10) { clearInterval(myInterval); } else { this.setState((prevState) => ({ count: prevState.count + 1, })); } }, 1000); } render() { return ( <> <button onClick={this.handleClick.bind(this)}>start</button> <p>{this.state.count}</p> </> ); } } funciona perfectamente
No sé lo que está pasando y me paso casi el día tratando de averiguarlo.
Entonces, ¿alguien sabe por qué functional el componente class y por qué no funciona el componente funcional?
Gracias por adelantado
Puede usar el patrón de "recuadro de referencia" para tener una referencia legible al valor más reciente del átomo de estado:
import {useState, useRef} from 'react'; function App() { const [count, setCount] = useState(0); const countRef = useRef(null); countRef.current = count; // Update the boxed value on render function handleClick() { const timer = setInterval(() => { if (countRef.current >= 10) { // Read the boxed value clearInterval(timer); } else { setCount((prevCount) => prevCount + 1); } }, 1000); } return ( <> <button onClick={handleClick}>start</button> <p>{count}</p> </> ); }Tenga en cuenta que actualmente no está limpiando correctamente el temporizador al desmontar, lo que hace que React le advierta sobre eso cuando desmonte su aplicación. Lo mismo se aplica a su componente de clase.