Tengo un proyecto que usa un componente de clase para contar el número de pulsaciones de botones. Lo hice funcionar, pero cuando consola.log el valor de conteo, devuelve un número uno más bajo que el número que se muestra, a pesar de que están usando la misma referencia. Esperaba que fueran el mismo número.
class ButtonCounter extends React.Component { constructor() { super() this.state = { count: 0 } } counter = 0 getCount = () => { console.log('giving count') return this.counter } setCount = (amnt) => { this.counter += amnt this.setState({ count: this.counter }) console.log(this.state.count) // returns -1 than the displayed value } render(){ return( <div> <button onClick = {() => this.setCount(1)}>{this.state.count}</button> </div> ) } }Como se indica en los documentos de reacción
setState() no siempre actualiza inmediatamente el componente. Puede procesar por lotes o diferir la actualización hasta más tarde. Esto hace que leer this.state justo después de llamar a setState() sea una trampa potencial. En su lugar, use componentDidUpdate o una devolución de llamada de setState (setState(updater, callback)), cualquiera de los cuales está garantizado para activarse después de que se haya aplicado la actualización.
Fuente: https://reactjs.org/docs/react-component.html#setstate
