Wie lösche ich Elemente sicher aus einem Statusarray in React?

Elemente aus einem Array in React löschen: Eine Anleitung

In React ist die Statusverwaltung entscheidend für die Aufrechterhaltung der Integrität des Verhaltens Ihrer Anwendung und Benutzererfahrung. Ein häufiges Szenario beinhaltet die Manipulation von Arrays im Zustand, wie etwa das Hinzufügen, Entfernen oder Aktualisieren von Elementen.

Um zu verstehen, wie man ein Element aus einem Zustandsarray löscht, betrachten wir ein einfaches Beispiel:

Sie möchten eine Liste mit drei Personen haben: Bob, Sally und Jack, gespeichert in einem Zustandsarray. Sie müssen in der Lage sein, jeden von ihnen aus der Liste zu entfernen, und wenn das Array entfernt wird, sollte es keine leeren Slots haben.

In Ihrer React-Komponente haben Sie möglicherweise den folgenden Code:

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];
},

Allerdings funktioniert diese Implementierung der Funktion „removePeople()“ beim Aufruf nicht wie vorgesehen. Der Grund liegt in der Art und Weise, wie React mit Statusmutationen umgeht.

Status in React niemals direkt ändern

Beim Aktualisieren eines Objekts oder Arrays im Status ist es wichtig, ein neues zu erstellen Kopie. Das direkte Ändern des ursprünglichen Statusobjekts oder Arrays kann zu unerwartetem Verhalten und potenziellen Fehlern führen.

In diesem Fall löst das direkte Löschen eines Elements aus dem Array, wodurch das ursprüngliche Statusobjekt geändert wird, keine Aktualisierung des aus Zustand in React. Der Status bleibt unverändert und die Benutzeroberfläche spiegelt die Entfernung von Bob aus der Liste nicht wider.

Array.prototype.filter() zum sicheren Entfernen verwenden

Zu Um ein Element auf eine mit React kompatible Weise aus einem Statusarray zu entfernen, gibt es mehrere Möglichkeiten. Eine effektive Methode ist die Verwendung von Array.prototype.filter().

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

Dieser Ansatz erstellt ein neues Array mit den gefilterten Ergebnissen. In diesem Fall wird die Person mit dem Zielwert herausgefiltert und somit effektiv aus der Liste entfernt. Das resultierende neue Array wird dann als Status festgelegt und löst die erforderlichen UI-Aktualisierungen aus, um die Entfernung des Elements widerzuspiegeln.

Das obige ist der detaillierte Inhalt vonWie lösche ich Elemente sicher aus einem Statusarray in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!