Element aus dem Array im Komponentenstatus entfernen

Ich versuche, den besten Weg zu finden, um ein Element aus einem Array im Status einer Komponente zu entfernen. Gibt this.statees 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.

Der sauberste Weg, dies zu tun, den ich gesehen habe, ist mit filter:

removeItem(index) {
  this.setState({
    data: this.state.data.filter((_, i) => i !== index)
  });
}

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.

this.setState(prevState => ({
  data: update(prevState.data, {$splice: [[index, 1]]})
}))

Ich glaube, dass von Verweisen this.stateinnerhalb von setState()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

removeItem : function(index) {
  this.setState(function(prevState){
    return { data : prevState.data.filter(function(val, i) {
      return i !== index;
    })};
  });
}

Verwenden von Array.prototype.filter mit ES6-Pfeilfunktionen

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i !== index)
  }));
}

Unveränderlichkeitshilfe verwenden

import update from 'immutability-helper'
...
removeItem(index) {
  this.setState((prevState) => ({
    data: update(prevState.data, {$splice: [[index, 1]]})
  }))
}

Spread verwenden

function removeItem(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

Beachten Sie, dass in jedem Fall unabhängig von der verwendeten Technik this.setState()ein Rückruf übergeben wird, kein Objektverweis auf den alten this.state;

Hier ist eine Möglichkeit, das Element im Status mithilfe der ES6-Spread-Syntax aus dem Array zu entfernen.

onRemovePerson: (index) => {
  const data = this.state.data;
  this.setState({ 
    data: [...data.slice(0,index), ...data.slice(index+1)]
  });
}

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

removeItem(index) {
  this.setState((prevState) => ({
    data: prevState.data.filter((_, i) => i != index)
  }));
}

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 :

// bad
{content.map((content, index) =>
  <p key={index}>{content.Content}</p>
)}

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.

// good
{content.map(content =>
  <p key={content.id}>{content.Content}</p>
)}

Das Obige ist ein Auszug aus dieser Antwort aus einem verwandten Beitrag .

Viel Spaß beim Codieren!

Nur ein Vorschlag: In Ihrem Code können Sie anstelle von let newData = prevState.dataSpread den in ES6 eingeführten Spread verwenden, den Sie let newData = ...prevState.data zum Kopieren von Arrays verwenden können

Drei 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

onRemovePerson: function(index) {
  this.setState((prevState) => ({
    data: [...prevState.data.slice(0,index), ...prevState.data.slice(index+1)]
  }))
}

Hoffe das trägt dazu bei !!

Sie können diese Funktion verwenden, wenn Sie das Element entfernen möchten (ohne Index).

removeItem(item) {
  this.setState(prevState => {
    data: prevState.data.filter(i => i !== item)
  });
}

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.

var dummyArray = [];    
this.setState({data: dummyArray.concat(this.state.data.slice(0, index), this.state.data.slice(index))})

Hoffe das hilft!

Sie können den Code mit einer einzeiligen Hilfsfunktion besser lesbar machen:

const removeElement = (arr, i) => [...arr.slice(0, i), ...arr.slice(i+1)];

dann benutze es so:

this.setState(state => ({ places: removeElement(state.places, index) }));

Hier ist eine einfache Möglichkeit, dies zu tun:

removeFunction(key){
  const data = {...this.state.data}; //Duplicate state.
  delete data[key];                  //remove Item form stateCopy.
  this.setState({data});             //Set state as the modify one.
}

Ich hoffe es hilft!!!