web-dev-qa-db-fra.com

L'état précédent de Reactjs-setState est le premier argument, les accessoires comme deuxième argument

J'ai lu dans cet article officiel ces lignes:

this.props et this.state peut être mis à jour de manière asynchrone, vous ne devez pas vous fier à leurs valeurs pour calculer l'état suivant.

Quelqu'un peut-il m'expliquer ce que le code suivant essaie de réaliser en donnant un exemple.

 this.setState((prevState, props) => ({
  couter: prevState.counter + props.increment
}));

Je fais référence à ce site officiel de reactjs React.js

javascriptreactjssetstate
10
QuickCoder

Ils disent que vous devriez faire comme ça au lieu de l'exemple ci-dessous.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

Ils ne peuvent pas garantir que l'état aura la valeur correcte si vous accédez comme ceci car setState () se produira de manière asynchrone, d'autres mises à jour pourraient se produire et modifier la valeur. Si vous allez calculer l'état sur la base de l'état précédent, vous devez vous assurer que vous avez la dernière et la plus récente valeur, donc ils ont fait setState () accepter une fonction appelée avec prevState et props, vous pouvez donc avoir la valeur correcte pour mettre à jour votre état, comme dans l'exemple ci-dessous.

 // Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));
27
Bruno Mazzardo

Pour ajouter à la réponse de Bruno, la fonction correcte ci-dessus est appelée une fonction pure . React est important sur quelque chose appelé immuabilité ce qui signifie que chaque valeur déclarée ne doit jamais être modifiée par rapport à sa déclaration d'origine si possible. Les variables de cette fonction ne sont pas votre réelle accessoires et état jusqu'à ce que vous les transmettiez, ce qui signifie que sur la pile de fonctions javascript (le thread qui met en file d'attente les appels de synchronisation et asynchrones), les valeurs et les références aux propriétés seront stockées différemment, créant une incertitude quant à ce que la valeur sera dans le "mauvais" " Cas.

5
lehmanad1