React setState ne met pas à jour l'état

Question

J'ai donc ceci:

 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 n'est qu'un tableau de nombres [1, 5, 9] par exemple cependant this.state.dealersOverallTotal ne donne pas le total correct mais total fait? J'ai même mis un délai d'attente pour voir si cela a résolu le problème. une évidence ou dois-je poster plus de code?

Answer 1

setState() est généralement asynchrone, ce qui signifie qu'au moment où vous console.log l'état, il n'est pas encore mis à jour. Essayez de mettre le journal dans le rappel de la méthode setState() . Il est exécuté une fois le changement d'état terminé:

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

Answer 2

setState est asynchrone. Vous pouvez utiliser la méthode de rappel pour obtenir un état mis à jour.

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

Answer 3

setState() prend du temps pour muter la valeur et votre javascript est asynchronous et donc votre console.log() sera exécuté avant que le setState mute les valeurs et vous voyez donc le résultat.

Pour le résoudre, connectez la valeur dans le callback function of setState comme

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