Löschen Sie das Element aus dem Statusarray in Reaktion

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.

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

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 
    })});
}

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});
}

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);});

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)
        })
      }
  
}

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.

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)
}

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
  })
},

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