javascript - react - state setstate

Reaccionar setState no actualiza el estado

Question

Entonces tengo esto:

let total = newDealersDeckTotal.reduce(function(a, b) {
return a + b;
},
0);
console.log(total, ''tittal''); //outputs correct total
setTimeout(() => {
this.setState({dealersOverallTotal: total});
}, 10);
console.log(this.state.dealersOverallTotal, ''dealersOverallTotal1''); //outputs incorrect total

newDealersDeckTotal es solo una serie de números [1, 5, 9] p [1, 5, 9] ej., sin embargo, this.state.dealersOverallTotal no proporciona el total correcto, pero el total sí. Incluso puse un tiempo de espera para ver si esto resolvió el problema. cualquier obvio o debo publicar más código?

Answer 1

Usando async / await

async changeHandler(event) {
await this.setState({ yourName: event.target.value });
console.log(this.state.yourName);
}

Answer 2

setState es asíncrono. Puede usar el método de devolución de llamada para obtener el estado actualizado.

changeHandler(event) {
this.setState({ yourName: event.target.value }, () =>
console.log(this.state.yourName));
}

Answer 3

setState() suele ser asíncrono, lo que significa que en el momento en que console.log el estado, aún no está actualizado. Intente poner el registro en la devolución de llamada del método setState() . Se ejecuta después de completar el cambio de estado:

this.setState({ dealersOverallTotal: total }, () => {
console.log(this.state.dealersOverallTotal, ''dealersOverallTotal1'');
}); 

Answer 4

setState() toma tiempo para mutar el valor y tu javascript es asynchronous y por lo tanto tu console.log() se ejecutará antes de que setState los valores y por lo tanto veas el resultado.

Para resolverlo, registre el valor en la callback function of setState como

setTimeout(() => {this.setState({dealersOverallTotal: total}, function(){
console.log(this.state.dealersOverallTotal, ''dealersOverallTotal1'');
});
}, 10)