Die Geschichte ist, ich sollte Bob, Sally und Jack in eine Kiste stecken können. Ich kann auch entweder aus der Box entfernen. Nach dem Entfernen bleibt kein Steckplatz mehr übrig.
people = ["Bob", "Sally", "Jack"]
Ich muss jetzt beispielsweise "Bob" entfernen. Das neue Array wäre:
["Sally", "Jack"]
Hier ist meine Reaktionskomponente:
...
getInitialState: function() {
return{
people: [],
}
},
selectPeople(e){
this.setState({people: this.state.people.concat([e.target.value])})
},
removePeople(e){
var array = this.state.people;
var index = array.indexOf(e.target.value); // Let's say it's Bob.
delete array[index];
},
...
Hier zeige ich Ihnen einen minimalen Code, da mehr dahinter steckt (onClick usw.). Der Schlüsselteil ist das Löschen, Entfernen und Zerstören von "Bob" aus dem Array, removePeople()
funktioniert aber nicht, wenn es aufgerufen wird. Irgendwelche Ideen? Ich habe mir das angesehen, aber ich könnte etwas falsch machen, da ich React verwende.
javascript
arrays
reactjs
Sylar
quelle
quelle
array.splice(array, 1);
Dankearray.splice(array, 1);
? Ich denke, Sie müssen es bearbeiten. Sie sollten verschiedene Variablen verwenden ...setState()
.Wenn Sie React verwenden, sollten Sie den Status niemals direkt ändern. Wenn ein Objekt (oder auch
Array
ein Objekt) geändert wird, sollten Sie eine neue Kopie erstellen.Andere haben die Verwendung vorgeschlagen
Array.prototype.splice()
, aber diese Methode mutiert das Array, daher ist es besser, sie nichtsplice()
mit React zu verwenden.Am einfachsten zum
Array.prototype.filter()
Erstellen eines neuen Arrays:quelle
this.setState(prevState => ({ people: prevState.people.filter(person => person !== e.target.value) }));
this.state.people.filter((_, i) => i !== index)
Hier ist eine kleine Variation der Reaktion von Aleksandr Petrov mit ES6
quelle
Verwenden Sie
.splice
diese Option , um Elemente aus dem Array zu entfernen. Bei Verwendungdelete
werden die Indizes des Arrays nicht geändert, der Wert eines bestimmten Index jedochundefined
Syntax:
array.splice(start, deleteCount[, item1[, item2[, ...]]])
Bearbeiten:
Wie von justin-grant hervorgehoben , mutieren Sie als Faustregel niemals
this.state
direkt, da ein späterer AufrufsetState()
die von Ihnen vorgenommene Mutation ersetzen kann. Behandle,this.state
als ob es unveränderlich wäre.Die Alternative besteht darin, Kopien der Objekte in zu erstellen
this.state
, die Kopien zu bearbeiten und sie mit neu zuzuweisensetState()
.Array#map
,Array#filter
Usw., verwendet werden.quelle
setState
. Andere Antworten enthalten Details dazu.Einfache Möglichkeit, ein Element aus dem Statusarray zu löschen:
Wenn Daten aus der Datenbank gelöscht und die Liste aktualisiert werden, ohne dass die API dieses Mal aufruft, übergeben Sie die gelöschte ID an diese Funktion, und diese Funktion entfernt gelöschte wiederhergestellte aus der Liste
quelle
item.post_id !== deletePostId
Einige Antworten, die mit "Spleiß" erwähnt wurden, haben, wie Chance Smith sagte, das Array mutiert. Ich würde vorschlagen, dass Sie den Methodenaufruf 'Slice' verwenden (Dokument für 'Slice' ist hier), der eine Kopie des ursprünglichen Arrays erstellt.
quelle
Es ist sehr einfach, zuerst definieren Sie einen Wert
Jetzt,
quelle
Du hast vergessen zu benutzen
setState
. Beispiel:Es ist jedoch besser zu verwenden,
filter
da es das Array nicht mutiert. Beispiel:quelle
Redfer doc für weitere Informationen
quelle