javascript - Hvordan slette et element fra state-array?

Historien er, jeg skal kunne sette Bob, Sally og Jack inn i en boks. Jeg kan også fjerne hvem som helst fra boksen. Når de fjernes, blir det ingen ledig plass.

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

Jeg trenger nå å fjerne, si, "Bob". Den nye matrisen ville være:

["Sally", "Jack"]

Her er min React-komponent:

...

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

...

Her viser jeg deg en minimal kode siden det er mer til det (onClick osv.). Hoveddelen er å slette, fjerne, ødelegge "Bob" fra arrayet, men removePeople() fungerer ikke når den kalles. Noen ideer? Jeg så på dette, men jeg kan gjøre noe feil siden jeg bruker React.

Svar #1

Når du bruker React, bør du aldri endre tilstanden direkte. Hvis et objekt (eller Array, som også er et objekt) endres, bør du lage en ny kopi.

Andre har foreslått å bruke Array.prototype.splice(), men den metoden endrer arrayen, så det er bedre å ikke bruke splice() med React.

Enklest å bruke Array.prototype.filter() for å lage et nytt array:

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

Svar #2

For å fjerne et element fra et array, gjør bare følgende:

array.splice(index, 1);

I ditt tilfelle:

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

Svar #3

Her er en liten variasjon på Aleksandr Petrovs svar som bruker ES6

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

Svar #4

Enkel løsning ved bruk av slice uten å endre tilstanden

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

Svar #5

Bruk .splice for å fjerne element fra array. Ved å bruke delete, vil ikke indeksene i arrayen bli endret, men verdien på den spesifikke indeksen vil bli undefined

Metoden splice() endrer innholdet i et array ved å fjerne eksisterende elementer og/eller legge til nye elementer.

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

Rediger:

Som påpekt av justin-grant, som en tommelfingerregel, aldri muter this.state direkte, da det å kalle setState() etterpå kan erstatte mutasjonen du gjorde. Behandle this.state som om det var uforanderlig.

Alternativet er å lage kopier av objektene i this.state og manipulere kopiene, og tilordne dem tilbake ved bruk av setState(). Array#map, Array#filter osv. kan brukes.

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

Svar #6

filter-metoden er den beste måten å endre arrayen på uten å berøre staten.

Den returnerer et nytt array basert på betingelsen.

I ditt tilfelle sjekk betingelsen person.id !== id i filteret og opprett et nytt array som ekskluderer elementet basert på betingelsen.

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

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

   setPeople( newPeople);
 };

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

Ikke anbefalt: Men du kan også bruke et elementindeks for betingelsen hvis du ikke har noen id.

index !== itemIndex

Svar #7

Enkelt måte å slette element fra tilstandsarray i React:

når noen data slettes fra databasen og listen oppdateres uten å kalle API, sender du det slettede ID til denne funksjonen, og denne funksjonen fjerner den slettede posten fra listen

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

Relaterte artikler