Wie lösche ich ein Element aus einem Statusarray in React und behalte dabei die Unveränderlichkeit bei?

React: Löschen eines Elements aus einem State Array

In React ist die effektive Datenpflege von entscheidender Bedeutung. Bei der Arbeit mit Arrays im Status ist es wichtig, die Unveränderlichkeit zu wahren. Das direkte Ändern von Arrays kann zu unerwartetem Verhalten führen.

Die Herausforderung

Stellen Sie sich ein Szenario vor, in dem die Personen „Bob“, „Sally“ und „Jack“ in einem gespeichert sind Zustandsarray „Menschen“. Das Ziel besteht darin, eine Person wie „Bob“ aus dem Array zu entfernen, ohne einen leeren Platz zu hinterlassen.

Die falsche Lösung

Die vorgestellte Methode „removePeople()“. versucht, ein Element zu löschen, indem das Array-Element am gewünschten Index auf undefiniert gesetzt wird. Dieser Ansatz mutiert jedoch den Zustand direkt und verstößt gegen das Unveränderlichkeitsprinzip von React.

Der React-Weg

Um ein Element ordnungsgemäß aus einem Zustandsarray zu entfernen, vermeiden Sie es, es direkt zu mutieren. Erstellen Sie stattdessen ein neues Array mit den geänderten Inhalten:

removePeople(e) {
    const updatedPeople = this.state.people.filter(person => person !== e.target.value);
    this.setState({people: updatedPeople});
}

Filter() to the Rescue

Array.prototype.filter() ist ein leistungsstarkes Tool für Erstellen neuer Arrays basierend auf angegebenen Bedingungen. In diesem Fall wird es verwendet, um die Zielperson aus dem ursprünglichen „Personen“-Array auszuschließen.

Unveränderlichkeit ist der Schlüssel

React verlässt sich stark auf unveränderliche Datenstrukturen. Durch die Beibehaltung der Unveränderlichkeit wird die Datenkonsistenz sichergestellt, unerwartete Zustandsänderungen vermieden und das Debuggen vereinfacht. Indem Sie neue Instanzen von Arrays erstellen, wie im filter()-Ansatz gezeigt, bewahren Sie dieses wichtige Prinzip in der React-Entwicklung.

Das obige ist der detaillierte Inhalt vonWie lösche ich ein Element aus einem Statusarray in React und behalte dabei die Unveränderlichkeit bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!