web-dev-qa-db-fra.com

React setState état non mis à jour

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

javascriptreactjsstatesetstate
47
The worm

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');
});
96
Fabian Schultz

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

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

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

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

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

Utiliser async/wait

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