Appelez setState dans une boucle seulement met à jour l'état 1 fois

Y a-t-il une raison pour laquelle l'appel de setSate() dans une boucle l'empêcherait de mettre à jour plusieurs fois l'état?

J'ai un jsbin très basique qui souligne le problème que je vois. Il y a deux boutons. Une mise à jour du compteur de l'état par 1. L'autre appelle la fonction sous-jacente de One dans une boucle – ce qui semble être la mise à jour de l'état à plusieurs reprises.

Je connais plusieurs solutions à ce problème, mais je veux m'assurer que je comprends d'abord le mécanisme sous-jacent. Pourquoi ne peut-on pas setState l'état d'appeler dans une boucle? Est-ce que je l'ai codé maladroitement qui empêche l'effet désiré?

Du document React :

SetState () ne mute pas immédiatement this.state mais crée une transition d'état en attente. L'accès à this.state après l'appel de cette méthode peut potentiellement renvoyer la valeur existante. Il n'y a aucune garantie de fonctionnement synchrone des appels pour configurer l'état et les appels peuvent être mis en lots pour des gains de performances.

Fondamentalement, n'appelez pas setState en boucle. Ce qui se passe ici est exactement ce à quoi les docs se réfèrent: this.state renvoie la valeur précédente, car la mise à jour de l'état en attente n'a pas encore été appliquée.

J'ai eu le même problème. Mais essayé avec une approche peu différente.

 iterateData(data){ //data to render let copy=[]; for(let i=0;<data.length;i++){ copy.push(<SomeComp data=[i] />) } this.setState({ setComp:copy }); } render(){ return( <div> {this.state.setComp} </div> ); }

J'espère que ça aide.

J'ai pu faire fonctionner votre code, appeler setState en boucle en procédant comme suit:

  manyClicks() { for (i = 0; i < 100; i++) { this.setState({clicks: this.state.clicks += 1}) } } enter code here

Espérons que cela vous aide!