ComponentDidUpdate innere Arbeit verwirrt mich

Question

Eine meiner React-Komponente erhalten ein Array von JSON. Und die Komponente enthält eine KomponenteDidUpdate. Ich weiß, dass diese Funktion direkt vor dem Rendern ausgeführt wird, und ich sehe nextProps und nextState, damit ich sie mit dem aktuellen vergleichen kann. Doch die inneren Arbeits verwirrt mich

---

Hier werden die Schritte meines Programms:

1. Mutter Komponente neu aktualisierte Liste dieser Komponente zu übergeben

2. Diese Komponente Lauf componentDidUpdate:

   • Vergleichen Sie die alte Liste mit dieser neuen aktualisierten Liste. Finden Sie die neu hinzugefügte Artikel, drücken Sie sie in dieser Komponente Zustand (ein Array Anruf differenceList)

3. diese Komponente rendern nach dem differenceList

---

Es folgt mein console.log, dass ich habe überall platziert.

// nachdem ich eine Aktualisierung der Liste

1. Eingabe ComponentWillUpdate
2. Fand das Unikat auslösen: „1336“ und nächste Codezeile schieben Sie es in Array
3. haben sollte nur geschoben es in Array mit self.setState({differenceList: self.state.differenceList.concat(item.id)});
4. erreicht Ende von ComponentWillUpdate, this.state.differenceList ist: [] // was ??
5. Eingeben der Renderfunktion, this.state.differenceList ist: []
6. ComponentWillUpdate eingeben // warum wieder?
7. Ende ComponentWillUpdate, this.state.differenceList ist: []
8. Eingabe-Rendering-Funktion, this.state.differenceList ist: [ "1336"]

warum #4 zeigt leer ??

um #6 warum componentWillUpdate erneut eingeben? Liegt es daran, dass ich den Status in componentWillUpdate aktualisiert habe? aber wenn ja, warum ist #5 zeigt leeren Zustand #8 Jetzt nach dem Eingeben der Render-Funktion wieder, zeigt es plötzlich den geänderten Zustand

Answer 1

Die Antwort ist, weil setState asynchron ist.

1. <Parent/> versucht <Child list={[1, 2, 1336]}/> (Batch 0)
   • willUpdate() mit nextProps = {list: [1, 2, 1336]}
   • self.setState({differenceList: self.state.differenceList.concat(['1336'])}) // This code is asynchronous, creating Batch 1
   • Ende willUpdate() zu machen, ist immer noch
   • render()
   die gleiche this.state aufgerufen wird
2. Behandlung von Batch 1 (Ihrem setState() Anruf)
   • willUpdate() mit nextState = { ... differenceList: ['1336'] }
   • this.state noch
   • Ende willUpdate()
   • render() mit neuem Staat nicht
aktualisiert

Ich bin Ich bin mir nicht sicher, ob ich sehr klar bin. Ich bin ein bisschen müde.
Anyways, you should not be using this.setState in componentWillUpdate().
Versuchen Sie, componentWillReceiveProps() für Ihre Zwecke zu verwenden.