Quiero actualizar el valor de una variable de contador después de un tiempo fijo indefinidamente. Aquí está mi código:
class Counter extends React.Component { constructor(props) { super(props); this.state = { myCount: 1 }; } // Update state after every 15 seconds. setTimeout(function(){ this.setState({myCount: this.state.myCount + 1}); }, 15000); }Sin embargo, recibo un error sobre un token inesperado con este componente. ¿Cómo puedo establecer el estado dentro de la clase correctamente sin usar ningún detector de eventos?
Gracias.
Su llamada a setTimeout está en el nivel superior del cuerpo de la class donde se esperan las propiedades, el constructor y los métodos. No puedes poner código arbitrario allí. (Aunque podría tener un inicializador de propiedades; sin embargo, no es una buena idea en este caso).
Ponlo encomponentDidMount ; y asegúrese de guardar el identificador del temporizador (en la instancia, por lo general) y borre el temporizador en componentWillUnmount para que no se active si el componente se desmonta antes de que se produzca la devolución de llamada del temporizador:
class Counter extends React.Component { constructor(props) { super(props); this.state = { myCount: 1, }; } componentDidMount() { // Update state after every 15 seconds. this.timerHandle = setTimeout(() => { // **** this.setState((previousState) => { // **** return { myCount: previousState.myCount + 1 }; // **** }); // **** }, 15000); } componentWillUnmount() { clearTimeout(this.timerHandle); } } Nota al margen: observe los cambios en las líneas **** de arriba
this .setState , que generalmente es mejor cuando se configura el estado en función del estado existente....después de un tiempo fijo indefinidamente.
Una devolución de llamada setTimeout solo ocurrirá una vez. Es posible que desee setInterval si desea que el contador se actualice cada 15 segundos. O alternativamente, inicie un nuevo setTimeout cuando se ejecute la devolución de llamada, así:
startCounterTimer() { // Update state after every 15 seconds. this.timerHandle = setTimeout(() => { this.setState((previousState) => { this.startCounterTimer(); // *** return { myCount: previousState.myCount + 1 }; }); }, 15000); } componentDidMount() { this.startCounterTimer(); }