Wie lösche ich ein Element aus dem Statusarray?

Lesezeit: 6 Minuten

Wie losche ich ein Element aus dem Statusarray
Sylar

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.

  • Das Problem ist, dass Sie Ihre Sammlung mutieren (ändern). Die Sammlung zeigt immer noch auf dieselbe Array-Referenz, daher wird sie nicht als geändert angesehen (die Variable zeigt immer noch auf dasselbe Array), daher wird sie nicht erneut gerendert. Eine übliche Implementierung besteht darin, den ursprünglichen Zustand zu kopieren, ihn zu ändern und dann den aktuellen Zustand mit der Kopie zu überschreiben, die eine neue Array-Referenz ist und als geändert angesehen wird, wodurch eine Renderaktualisierung verursacht wird.

    – CTS_AE

    19. Januar um 0:19 Uhr

Wie losche ich ein Element aus dem Statusarray
iaretiga

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

  • Ja, das ist deklarativ. Eine alternative Methode mit prevState- und Pfeilfunktionen: this.setState(prevState => ({ people: prevState.people.filter(person => person !== e.target.value) }));

    – Josh Morel

    15. April 2017 um 16:57 Uhr


  • Dies sollte die akzeptierte Antwort gemäß dem React-Idiom des niemals mutierenden Zustands sein.

    – Lux

    3. Januar 2018 um 15:53 ​​Uhr

  • oder über den Index: this.state.people.filter((_, i) => i !== index)

    – mb21

    28. Mai 2018 um 12:11 Uhr

  • Es gibt Slice, das unveränderlich ist, und Splice, das veränderlich ist

    – Kassian

    21. Juni 2018 um 17:51 Uhr

  • Das Problem bei dieser Antwort ist, dass Sie alle Personen entfernen, wenn Sie mehrere Personen mit demselben Namen haben. Die Verwendung des Index ist sicherer in Fällen, in denen Sie möglicherweise Duplikate haben

    – Klugjo

    25. Januar 2019 um 14:33 Uhr


1647265519 66 Wie losche ich ein Element aus dem Statusarray
MarcoS

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

  • In meinem Fall war es: array.splice(array, 1); Danke

    – Silar

    31. März 2016 um 7:49 Uhr

  • Wenn Sie React verwenden, sollten Sie generell vermeiden, Ihren Zustand direkt zu mutieren. Sie sollten ein neues Array erstellen und verwenden setState().

    – iaretiga

    31. März 2016 um 8:02 Uhr


  • Ich empfehle in diesem Fall die Verwendung von Array.from(this.state.items) anstelle des Spread-Operators. Dies liegt daran, dass Array.from speziell für diese Verwendung vorgesehen ist.

    – Francisco Hodge

    14. Juni 2018 um 14:19 Uhr

  • Kleiner Vorschlag, fügen Sie eine Überprüfung auf “index !== -1” hinzu, bevor Sie das Array spleißen, um unerwünschtes Entfernen zu verhindern.

    – Robobear

    7. November 2018 um 18:04 Uhr

  • Das ist Anti-Muster. Die Spleißfunktion mutiert oder ändert sich gleich

    – ibsenv

    23. November 2019 um 10:29 Uhr

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

1647265520 968 Wie losche ich ein Element aus dem Statusarray
Rayon

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

1647265521 446 Wie losche ich ein Element aus dem Statusarray
ANKIT DETROJA

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

  • Können Sie erklären, wie sich dies von den 8 anderen Antworten auf diese drei Jahre alte Frage unterscheidet? Aus Bewertung

    – Wai Ha Lee

    22. März 2019 um 8:11 Uhr

  • Im obigen Code wird ein neues Array von Daten neu erstellt, aber “deletePostId” dieser ID übersprungen

    – ANKIT DETROJA

    9. September 2019 um 10:54 Uhr

  • verwenden item.post_id !== deletePostId

    – Nimisch goel

    25. Mai 2020 um 10:30 Uhr

1647265521 103 Wie losche ich ein Element aus dem Statusarray
Hidayt Rahman

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

  • Können Sie erklären, wie sich dies von den 8 anderen Antworten auf diese drei Jahre alte Frage unterscheidet? Aus Bewertung

    – Wai Ha Lee

    22. März 2019 um 8:11 Uhr

  • Im obigen Code wird ein neues Array von Daten neu erstellt, aber “deletePostId” dieser ID übersprungen

    – ANKIT DETROJA

    9. September 2019 um 10:54 Uhr

  • verwenden item.post_id !== deletePostId

    – Nimisch goel

    25. Mai 2020 um 10:30 Uhr

1647265521 6 Wie losche ich ein Element aus dem Statusarray
willmaz

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

1001820cookie-checkWie lösche ich ein Element aus dem Statusarray?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy