Löschen Sie das Element aus dem Statusarray in Reaktion

130

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.

Sylar
quelle

Antworten:

165

Um ein Element aus einem Array zu entfernen, gehen Sie einfach wie folgt vor:

array.splice(index, 1);

In deinem Fall:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},
MarcoS
quelle
2
In meinem Fall war es: array.splice(array, 1);Danke
Sylar
array.splice(array, 1);? Ich denke, Sie müssen es bearbeiten. Sie sollten verschiedene Variablen verwenden ...
Rayon
59
Wenn Sie React verwenden, sollten Sie generell vermeiden, Ihren Status direkt zu ändern. Sie sollten ein neues Array erstellen und verwenden setState().
Iaretiga
2
Ich empfehle in diesem Fall die Verwendung von Array.from (this.state.items) anstelle des Spread-Operators. Dies liegt daran, dass Array.from speziell für diese Verwendung vorgesehen ist.
Francisco Hodge
2
Kleiner Vorschlag, fügen Sie vor dem Spleißen des Arrays eine Prüfung auf "index! == -1" hinzu, um unerwünschte Entfernungen zu verhindern.
RoboBear
198

Wenn Sie React verwenden, sollten Sie den Status niemals direkt ändern. Wenn ein Objekt (oder auch Arrayein 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 nicht splice()mit React zu verwenden.

Am einfachsten zum Array.prototype.filter()Erstellen eines neuen Arrays:

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}
iaretiga
quelle
41
Ja, das ist deklarativ. Eine alternative Methode mit prevState und Pfeilfunktionen:this.setState(prevState => ({ people: prevState.people.filter(person => person !== e.target.value) }));
Josh Morel
9
Dies sollte die akzeptierte Antwort gemäß der Reaktionssprache des niemals mutierenden Zustands sein.
Lux
9
oder unter Verwendung des Index:this.state.people.filter((_, i) => i !== index)
mb21
2
Es gibt eine Scheibe, die unveränderlich ist und die veränderlich ist
Cassian
Das Problem mit dieser Antwort ist, wenn Sie mehrere Personen mit demselben Namen haben, werden Sie alle diese entfernen. Die Verwendung des Index ist sicherer in Fällen, in denen Sie möglicherweise
Dupes
39

Hier ist eine kleine Variation der Reaktion von Aleksandr Petrov mit ES6

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}
Dmitry
quelle
17

Verwenden Sie .splicediese Option , um Elemente aus dem Array zu entfernen. Bei Verwendung deletewerden die Indizes des Arrays nicht geändert, der Wert eines bestimmten Index jedochundefined

Die splice () -Methode ändert den Inhalt eines Arrays, indem vorhandene Elemente entfernt und / oder neue Elemente hinzugefügt werden.

Syntax: array.splice(start, deleteCount[, item1[, item2[, ...]]])

var people = ["Bob", "Sally", "Jack"]
var toRemove = 'Bob';
var index = people.indexOf(toRemove);
if (index > -1) { //Make sure item is present in the array, without if condition, -n indexes will be considered from the end of the array.
  people.splice(index, 1);
}
console.log(people);

Bearbeiten:

Wie von justin-grant hervorgehoben , mutieren Sie als Faustregel niemalsthis.state direkt, da ein späterer Aufruf setState()die von Ihnen vorgenommene Mutation ersetzen kann. Behandle, this.stateals 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 zuzuweisen setState(). Array#map, Array#filterUsw., verwendet werden.

this.setState({people: this.state.people.filter(item => item !== e.target.value);});
Rayon
quelle
3
Stellen Sie sicher, dass Sie keinen Spleiß oder eine Methode verwenden, die Ihre Statusvariable direkt ändert. Stattdessen möchten Sie eine Kopie des Arrays erstellen, das Element aus der Kopie entfernen und die Kopie dann an übergeben setState. Andere Antworten enthalten Details dazu.
Justin Grant
12

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

export default class PostList extends Component {
  this.state = {
      postList: [
        {
          id: 1,
          name: 'All Items',
        }, {
          id: 2,
          name: 'In Stock Items',
        }
      ],
    }


    remove_post_on_list = (deletePostId) => {
        this.setState({
          postList: this.state.postList.filter(item => item.post_id != deletePostId)
        })
      }
  
}

ANKIT-DETROJA
quelle
1
Können Sie erklären, wie sich dies von den 8 anderen Antworten auf diese drei Jahre alte Frage unterscheidet? Aus der Bewertung
Wai Ha Lee
im obigen Code wird ein neues Datenarray neu erstellt, aber "deletePostId" überspringt diese ID
ANKIT-DETROJA
Verwendungitem.post_id !== deletePostId
Nimish Goel
3

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.

Arthur Chen
quelle
3

Es ist sehr einfach, zuerst definieren Sie einen Wert

state = {
  checked_Array: []
}

Jetzt,

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}
QC Innodel
quelle
1

Du hast vergessen zu benutzen setState. Beispiel:

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
  this.setState({
    people: array
  })
},

Es ist jedoch besser zu verwenden, filterda es das Array nicht mutiert. Beispiel:

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},
Aleksandr Petrov
quelle
1
removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
    array.splice(index,1);
}

Redfer doc für weitere Informationen

Gibbs
quelle