Wie lösche ich ein Element aus dem Statusarray?

Die Geschichte ist, ich sollte in der Lage sein, Bob, Sally und Jack in eine Kiste zu stecken. Ich kann beides auch aus der Box nehmen. Beim Entfernen bleibt kein Steckplatz übrig.

people = ["Bob", "Sally", "Jack"]

Ich muss jetzt sagen, “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 dahintersteckt (onClick etc). Der Schlüsselteil besteht darin, “Bob” aus dem Array zu löschen, zu entfernen und zu zerstören, aber removePeople() funktioniert nicht, wenn angerufen wird. Irgendwelche Ideen? Ich habe mir das angesehen, aber vielleicht mache ich etwas falsch, da ich React verwende.

Wenn Sie React verwenden, sollten Sie den Status niemals direkt mutieren. Wenn ein Objekt (bzw Arraydie auch ein Objekt ist) geändert wird, sollten Sie eine neue Kopie erstellen.

Andere haben die Verwendung vorgeschlagen Array.prototype.splice()aber diese Methode mutiert das Array, also ist es besser, es nicht zu verwenden splice() mit Reagieren.

Am einfachsten zu bedienen Array.prototype.filter() So erstellen Sie ein neues Array:

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

Um ein Element aus einem Array zu entfernen, tun Sie einfach:

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

Hier ist eine geringfügige Variation der Antwort von Aleksandr Petrov mit ES6

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

Verwenden .splice um ein Element aus dem Array zu entfernen. Verwenden deletewerden die Indizes des Arrays nicht geändert, aber der Wert des spezifischen Index wird geändert undefined

Die spleißen() -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 betont justin-grantAls Faustregel gilt, noch nie mutieren this.state direkt, als Anruf setState() danach kann die von Ihnen vorgenommene Mutation ersetzt werden. Behandeln this.state als ob es unveränderlich wäre.

Die Alternative ist, erstellen Sie Kopien der Objekte in this.state und manipulieren Sie die Kopien, indem Sie sie mit wieder zuweisen setState(). Array#map, Array#filter usw. verwendet werden könnten.

this.setState({people: this.state.people.filter(item => item !== e.target.value);});

Einfache Möglichkeit zum Löschen von Elementen aus dem Zustandsarray in Reaktion:

Wenn Daten aus der Datenbank gelöscht und die Liste aktualisiert wird, ohne dass die API zu diesem Zeitpunkt aufruft, übergeben Sie die gelöschte ID an diese Funktion und diese Funktion entfernt gelöschte Aufzeichnungen 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)
        })
      }
  
}

filter -Methode ist der beste Weg, um das Array zu ändern, ohne den Zustand zu berühren.

Es gibt basierend auf der Bedingung ein neues Array zurück.

Überprüfen Sie in Ihrem Fall den Zustand des Filters person.id !== id und erstellen Sie ein neues Array, das das Element basierend auf der Bedingung ausschließt.

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => person.id !== id);

   setPeople( newPeople);
 };

<button onClick={() => handleRemove(id)}>Remove</button>

Nicht ratsam: Sie können aber auch einen Artikelindex für die Bedingung verwenden, wenn Sie keine ID haben.

index !== itemIndex

Einfache Lösung mit slice ohne den Staat zu mutieren

const [items, setItems] = useState(data);
const removeItem = (index) => {
  setItems([
             ...items.slice(0, index),
             ...items.slice(index + 1)
           ]);
}