Mam wartości państwowe jako

this.state = {
    emp: [
        {id: "1", name: "A"}
        {id: "2", name: "B"}
        {id: "3", name: "B"}
    ]
}

Jak mogę dodać tablicę jak var arr = {id:"4", name:"D"} do stanu emp bez wyjmowania bieżących wartości tablicy. Chcę tylko dołączyć nową tablicę wartości do obecnej tablicy stanu. Czy ktoś może pomóc?

0
Hareesh S 5 czerwiec 2018, 12:36

3 odpowiedzi

Najlepsza odpowiedź

W nowoczesnym JavaScript możesz użyć operatora Spread:

Dodaj pojedynczy element

addItem = item => {
  this.setState({
    emp: [
      ...this.state.emp,
      item 
    ]
  })
}

Dodaj wiele pozycji:

addItems = items => {
  this.setState({
    emp: [
      ...this.state.emp,
      ...items
    ]
  })
}

Operator Spread umieszcza wszystkie elementy this.state.emp w nowej instancji tablicy i {x1}} zostaje załączony jako ostatni element.

Nie powinieneś zamuścić stanu komponentu z innymi środkami niż Setstate jako renderowane dane wyjdzie z synchronizacji.

8
lipp 5 czerwiec 2018, 09:56

Wystarczy użyć Concat

this.setState({ emp: this.state.emp.concat('new value') })

Powody, dla których Concat jest lepszy niż push, unshift

array.push

Array.prototype.push pozwala nam naciskać elementy do końca tablicy. Ta metoda nie zwraca nowej kopii, raczej zamuwa oryginalną tablicę, dodając nowy element i zwraca nową właściwość obiektu, na którym wywołano metodę.

array.Unshift

Aby dodać elementy do samego początku tablicy. Tak jak naciskający, rozsypnia nie zwraca nowej kopii zmodyfikowanej tablicy, raczej nowej długości tablicy

Oba sposoby zmienia stan mutacji array. Termin mutacji ma być niezmieniony, ponieważ jest to nasze oryginalne źródło.

array.concat

Metoda concat () służy do łączenia dwóch lub więcej tablic. Ta metoda nie zmienia istniejących tablic, ale zamiast tego zwraca nową tablicę.

Jednak ty Obiekt.Asign () też, który tworzy głęboką kopię przypisanej do obiektu.

let emp = Object.assign([],this.state.emp); //type of an array

Wynik Wprowadź opis obrazu tutaj

3
Manoz 5 czerwiec 2018, 09:57

Musisz zaktualizować, jeśli używasz funkcjonalnego Setstate (ponieważ aktualizujesz stan oparty na Prevstate) i rozprzestrzeniają się składnię jak

this.setState(prevState => ({
    emp: [
        ...prevState.emp, 
        {id:"4",name:"c"}
    ]
}))
2
Shubham Khatri 5 czerwiec 2018, 09:39