Ich versuche, den besten Weg zu finden, um ein Element aus einem Array im Status einer Komponente zu entfernen. Gibt this.state
es eine bessere (prägnantere) Möglichkeit, ein Element aus einem Array zu entfernen, als ich es hier habe, da ich die Variable nicht direkt ändern sollte ?:
onRemovePerson: function(index) {
this.setState(prevState => { // pass callback in setState to avoid race condition
let newData = prevState.data.slice() //copy array from prevState
newData.splice(index, 1) // remove element
return {data: newData} // update state
})
},
Danke dir.
Aktualisiert
Dies wurde aktualisiert, um den Rückruf in setState zu verwenden. Dies sollte erfolgen, wenn beim Aktualisieren auf den aktuellen Status verwiesen wird.
javascript
reactjs
aherriot
quelle
quelle
Antworten:
Der sauberste Weg, dies zu tun, den ich gesehen habe, ist mit
filter
:quelle
_
wird manchmal verwendet, um ein nicht verwendetes Argument darzustellen. Hier ist es das aktuelle Element im Array.this.state
als Input fürthis.setState()
, auch unveränderlich, wird nicht empfohlen. In meiner Antwort oben finden Sie einen Verweis auf die offiziellen React-Dokumente zu diesem Thema.Sie könnten den
update()
Unveränderlichkeitshelfer von verwendenreact-addons-update
, der effektiv dasselbe unter der Haube tut, aber was Sie tun, ist in Ordnung.quelle
react-addons-update
ist jetzt veraltet (2016).immutability-helper
ist als Ersatz erhältlich. github.com/kolodny/immutability-helper Siehe auch meine Antwort unten bezüglich der Nicht-Mutation dieses Zustands direkt in this.setState ().Ich glaube, dass von Verweisen
this.state
innerhalb vonsetState()
abgeraten wird ( Statusaktualisierungen können asynchron sein ).In den Dokumenten wird empfohlen,
setState()
eine Rückruffunktion zu verwenden, damit prevState zur Laufzeit übergeben wird, wenn die Aktualisierung erfolgt. So würde es also aussehen:Verwenden von Array.prototype.filter ohne ES6
Verwenden von Array.prototype.filter mit ES6-Pfeilfunktionen
Unveränderlichkeitshilfe verwenden
Spread verwenden
Beachten Sie, dass in jedem Fall unabhängig von der verwendeten Technik
this.setState()
ein Rückruf übergeben wird, kein Objektverweis auf den altenthis.state
;quelle
this.setState({ data: [...this.state.data.slice(0, index), ...this.state.data.slice(index + 1)] });
es falsch,this.state
anstelle derprevState
von @ user1628461 angezeigten Rückrufoption zu verwenden?Hier ist eine Möglichkeit, das Element im Status mithilfe der ES6-Spread-Syntax aus dem Array zu entfernen.
quelle
Ich möchte mich hier einschalten, obwohl diese Frage von @pscl bereits richtig beantwortet wurde, falls jemand anderes auf dasselbe Problem stößt wie ich. Von den 4 angegebenen Methoden habe ich mich entschieden, die es6-Syntax mit Pfeilfunktionen zu verwenden, da sie präzise ist und nicht von externen Bibliotheken abhängig ist:
Verwenden von Array.prototype.filter mit ES6-Pfeilfunktionen
Wie Sie sehen, habe ich eine geringfügige Änderung vorgenommen, um den Indextyp (
!==
to!=
) zu ignorieren , da ich in meinem Fall den Index aus einem Zeichenfolgenfeld abgerufen habe.Ein weiterer hilfreicher Punkt, wenn Sie beim Entfernen eines Elements auf der Clientseite ein seltsames Verhalten feststellen, besteht darin, NIEMALS den Index eines Arrays als Schlüssel für das Element zu verwenden :
Wenn sich React bei einer Änderung mit dem virtuellen DOM unterscheidet, werden die Schlüssel überprüft, um festzustellen, was sich geändert hat. Wenn Sie also Indizes verwenden und das Array einen weniger enthält, wird der letzte entfernt. Verwenden Sie stattdessen die IDs des Inhalts wie folgt als Schlüssel.
Das Obige ist ein Auszug aus dieser Antwort aus einem verwandten Beitrag .
Viel Spaß beim Codieren!
quelle
Nur ein Vorschlag: In Ihrem Code können Sie anstelle von
let newData = prevState.data
Spread den in ES6 eingeführten Spread verwenden, den Sielet newData = ...prevState.data
zum Kopieren von Arrays verwenden könnenDrei Punkte ... stehen für Spread-Operatoren oder Ruheparameter .
Damit kann ein Array-Ausdruck oder eine Zeichenfolge oder alles, was iteriert werden kann, an Stellen erweitert werden, an denen null oder mehr Argumente für Funktionsaufrufe oder Elemente für ein Array erwartet werden.
Zusätzlich können Sie Elemente aus dem Array wie folgt löschen
Hoffe das trägt dazu bei !!
quelle
Sie können diese Funktion verwenden, wenn Sie das Element entfernen möchten (ohne Index).
quelle
Wie in einem Kommentar zur obigen Antwort von ephrion erwähnt, kann filter () langsam sein, insbesondere bei großen Arrays, da nach einem Index gesucht wird, der anscheinend bereits bestimmt wurde. Dies ist eine saubere, aber ineffiziente Lösung.
Alternativ kann man einfach das gewünschte Element herausschneiden und die Fragmente verketten.
Hoffe das hilft!
quelle
Sie können den Code mit einer einzeiligen Hilfsfunktion besser lesbar machen:
dann benutze es so:
quelle
Hier ist eine einfache Möglichkeit, dies zu tun:
Ich hoffe es hilft!!!
quelle
delete
Elemente entfernt werden, die Indizes jedoch nicht aktualisiert werden. Daher wäre dies kein guter Ansatz für reguläre Anforderungen.