Usuń element z tablicy stanów w React

Chodzi o to, że powinienem być w stanie włożyć Boba, Sally i Jacka do pudełka. Mogę też wyjąć albo z pudełka. Po usunięciu nie ma miejsca.

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

Muszę teraz usunąć, na przykład „Bob”. Nowa tablica wyglądałaby następująco:

["Sally", "Jack"]

Oto mój składnik reagowania:

...

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

...

Tutaj pokazuję minimalny kod, ponieważ jest w nim więcej (onClick itp.). Kluczową częścią jest usunięcie, usunięcie, zniszczenie "Bob" z tablicy, ale removePeople()nie działa po wywołaniu. Jakieś pomysły? Ja patrząc na to , ale mogę robić coś złego, ponieważ używam React.

Aby usunąć element z tablicy, po prostu wykonaj:

array.splice(index, 1);

W Twoim przypadku:

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

Korzystając z Reacta, nigdy nie powinieneś zmieniać stanu bezpośrednio. Jeśli obiekt (lub Arrayktóry jest również obiektem) zostanie zmieniony, powinieneś utworzyć nową kopię.

Inni sugerowali użycie Array.prototype.splice(), ale ta metoda mutuje Array, więc lepiej nie używać splice()z React.

Najłatwiejszy w użyciu Array.prototype.filter()do utworzenia nowej tablicy:

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

Oto niewielka odmiana odpowiedzi Aleksandra Pietrowa za pomocą ES6

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

Służy .splicedo usuwania elementu z tablicy. Używając delete, indeksy tablicy nie zostaną zmienione, ale wartość konkretnego indeksu ulegnie zmianieundefined

Metoda splice () zmienia zawartość tablicy, usuwając istniejące elementy i / lub dodając nowe elementy.

Składnia: 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);

Edytować:

Jak wskazał justin-grant , z reguły nigdy nie mutuj this.statebezpośrednio, ponieważ setState()późniejsze wywołanie może zastąpić dokonaną przez Ciebie mutację. Traktuj this.statetak, jakby było niezmienne.

Alternatywą jest tworzenie kopii obiektów w programie this.statei manipulowanie nimi, przypisując je z powrotem za pomocą setState(). Array#map, Array#filterItd. Mogą być wykorzystane.

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

Łatwy sposób na usunięcie pozycji z tablicy stanów w reakcji:

kiedy jakiekolwiek dane usuwają się z bazy danych i aktualizują listę bez wywołania API tym razem przekazujesz usunięty identyfikator do tej funkcji i ta funkcja usuwa usunięte recored z listy

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

Niektóre odpowiedzi wspominały o użyciu „splotu”, co, jak powiedział Chance Smith, spowodowało mutację tablicy. Sugerowałbym użycie wywołania metody „plasterek” (dokument „plasterek” jest tutaj), które tworzy kopię oryginalnej tablicy.

To bardzo proste. Najpierw określ wartość

state = {
  checked_Array: []
}

Teraz,

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

Zapomniałeś użyć setState. Przykład:

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

Ale lepiej jest użyć, filterponieważ nie powoduje mutacji tablicy. Przykład:

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

Więcej informacji znajdziesz w dokumencie Redfer