Ich möchte am Ende eines state
Arrays ein Element hinzufügen. Ist dies der richtige Weg, dies zu tun?
this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});
Ich befürchte, dass das Ändern des Arrays an Ort und Stelle push
Probleme verursachen könnte - ist es sicher?
Die Alternative, eine Kopie des Arrays zu erstellen, und setState
das scheint verschwenderisch.
javascript
reactjs
Fadedbee
quelle
quelle
Antworten:
In den React-Dokumenten heißt es:
Sie
push
werden den Status direkt mutieren und dies könnte möglicherweise zu fehleranfälligem Code führen, selbst wenn Sie den Status danach erneut "zurücksetzen". F.ex, es könnte dazu führen, dass einige Lebenszyklusmethoden wiecomponentDidUpdate
nicht ausgelöst werden.In späteren React-Versionen wird empfohlen , beim Ändern von Status eine Updater- Funktion zu verwenden, um Rennbedingungen zu vermeiden:
Die Speicherverschwendung ist kein Problem im Vergleich zu den Fehlern, die bei nicht standardmäßigen Statusänderungen auftreten können.
Alternative Syntax für frühere React-Versionen
Sie können verwenden
concat
, um eine saubere Syntax zu erhalten, da ein neues Array zurückgegeben wird:In ES6 können Sie den Spread Operator verwenden :
quelle
push
gibt die neue Array-Länge zurück, sodass dies nicht funktioniert. AuchsetState
ist async und reagieren können mehrere Zustandsänderungen in einem einzigen Durchlauf machen Warteschlange.setState
zweimal aufzurufen . Sie zeigt zwei ähnliche Beispiele für das Festlegen eines Statusarrays, ohne es direkt zu mutieren.let list = Array.from(this.state.list); list.push('woo'); this.setState({list});
Ändern Sie es natürlich an Ihre Stilvorlieben.Am einfachsten, wenn Sie verwenden
ES6
.Neues Array wird sein
[1,2,3,4]
um Ihren Status in React zu aktualisieren
Erfahren Sie mehr über die Array-Destrukturierung
quelle
Der einfachste Weg mit
ES6
:quelle
tableData = [['test','test']]
Nachdem mein neues Array geschoben wurdetableData = [['test','test'],['new','new']]
. wie man diese @David und @Ridd[['test','test'],['new','new']]
versuchen möchten, versuchen:this.setState({ tableData: [...this.state.tableData, ['new', 'new']]
this.setState({ tableData: [...this.state.tableData ,[item.student_name,item.homework_status_name,item.comments===null?'-':item.comments] ] });
Es fügt das neue Array zweimal ein.this.state.tableData.push([item.student_name,item.homework_status_name,item.comments===null?'-':item.comments]);
Es erreicht das gewünschte Ziel. aber es ist nicht die richtige Art, wie ich denke.React kann Batch-Updates durchführen. Daher besteht der richtige Ansatz darin, setState eine Funktion zur Verfügung zu stellen, mit der das Update durchgeführt wird.
Für das React-Update-Addon funktioniert Folgendes zuverlässig:
oder für concat ():
Das Folgende zeigt, was https://jsbin.com/mofekakuqi/7/edit?js,output als Beispiel dafür ist, was passiert, wenn Sie etwas falsch machen.
Der Aufruf von setTimeout () fügt drei Elemente korrekt hinzu, da React keine Aktualisierungen innerhalb eines setTimeout-Rückrufs stapelweise durchführt (siehe https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).
Der Buggy onClick fügt nur "Third" hinzu, der feste jedoch wie erwartet F, S und T.
quelle
this.setState( update(this.state, {array: {$push: ["First", "Second", "Third"]}}) )
state.array = state.array.concat([4])
Dies mutiert das vorherige Statusobjekt.Wie im Kommentar bei @nilgun erwähnt, können Sie die Helfer für die Reaktion auf Unveränderlichkeit verwenden . Ich fand das super nützlich.
Aus den Dokumenten:
Einfacher Druck
initialArray ist immer noch [1, 2, 3].
quelle
Wenn Sie eine Funktionskomponente verwenden, verwenden Sie diese bitte wie folgt.
quelle
Für das Hinzufügen eines neuen Elements zum Array
push()
sollte die Antwort sein.Für das Entfernen des Elements und das Aktualisieren des Status des Arrays funktioniert der folgende Code für mich.
splice(index, 1)
kann nicht arbeiten.quelle
Ich versuche, einen Wert in einem Array-Status zu pushen und einen solchen Wert festzulegen und den Status-Array- und Push-Wert durch die Map-Funktion zu definieren.
quelle
Dies funktionierte für mich, um ein Array innerhalb eines Arrays hinzuzufügen
quelle
Hier ist ein Beispiel aus dem Jahr 2020, Reactjs Hook, von dem ich dachte, dass es anderen helfen könnte. Ich verwende es, um einer Reactjs-Tabelle neue Zeilen hinzuzufügen. Lassen Sie mich wissen, ob ich etwas verbessern könnte.
Hinzufügen eines neuen Elements zu einer Funktionszustandskomponente:
Definieren Sie die Statusdaten:
Lassen Sie eine Schaltfläche eine Funktion auslösen, um ein neues Element hinzuzufügen
quelle
quelle
stackoverflow
.setState(state => ({arrayvar: [...state.arrayvar, ...newelement]}) );
newelement
Objekts innerhalb eines Arrays wirftTypeError
trotzdem ein.quelle
Dieser Code funktioniert für mich:
quelle
.push
eine Zahl und kein Array zurückgegeben wird.