Estoy confundido con cómo funciona setState.
Aquí hay una parte de mi código:
handleBarsChange(value) { this.setState({numberOfbars: value}); this.resetArray(); } aparentemente, cuando la función resetArray() se ejecuta e intenta acceder a la variable de estado this.state.numberOfbars , setState aún no ha actualizado el valor.
Quiero alguna explicación sobre cómo y dónde se debe ejecutar setState y cuándo puedo esperar ver el cambio.
¡Gracias!
setState es asíncrono. Tiene un segundo argumento de devolución de llamada que se puede usar para ejecutar código después de una transición de estado. Este no siempre es el mejor enfoque, pero con el ejemplo muy limitado proporcionado, es difícil decirlo.
this.setState({numberOfBars: value}, () => { this.resetArray() })De los documentos de reacción:
El segundo parámetro de setState() es una función de devolución de llamada opcional que se ejecutará una vez que se complete setState y se vuelva a representar el componente. En general, recomendamos usar componentDidUpdate() para dicha lógica en su lugar.
El hecho es que la función setState() es asíncrona, por lo que incluso si ejecuta el código después de llamarlo, es posible que algunos estados aún no se actualicen.
La solución es implementar una devolución de llamada cuando el estado se actualizó correctamente ( setState(<state>, <callback>) ), por ejemplo:
handleBarsChange(value){ this.setState({numberOfbars: value}, () => { this.resetArray(); }); }