Prawidłowy sposób wypychania do macierzy stanu

Question

Wydaje się, że mam problemy z wypychaniem danych do tablicy stanów. staram się osiągnąć to w następujący sposób:

this.setState({ myArray: this.state.myArray.push('new value') }) 

Ale wierzę, że to jest błędny sposób i powoduje problemy ze zmienności?

Answer 1

Array Push zwraca długość

this.state.myArray.push('new value') zwraca długość rozszerzonej tablicy, zamiast samej tablicy.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Chyba spodziewać zwrócona wartość będzie tablica.

Niezmienność

Wydaje się, że to raczej zachowanie React:

NIGDY mutować this.state bezpośrednio, jak wywoływanie setState() potem może zastąpić mutację wprowadzoną. Traktuj to. Stan tak, jakby był niezmienny.

https://facebook.github.io/react/docs/component-api.html

Chyba, byś zrobił to w ten sposób (nie zna React):

var joined = this.state.myArray.concat('new value'); 
this.setState({ myArray: joined }) 

Answer 2

Można użyć .concat metodę, aby utworzyć kopię tablicy z nowymi danymi:

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

Ale uwaga na szczególne zachowanie metody .concat podczas przekazywania tablic - [1, 2].concat(['foo', 3], 'bar') spowoduje [1, 2, 'foo', 3, 'bar'].

Answer 3

Nie powinieneś w ogóle obsługiwać stanu. Przynajmniej nie bezpośrednio. Jeśli chcesz zaktualizować tablicę, będziesz chciał zrobić coś takiego.

var newStateArray = this.state.myArray.slice(); 
newStateArray.push('new value'); 
this.setState(myArray: newStateArray); 

Praca nad obiektem stanu bezpośrednio nie jest pożądana. Możesz także rzucić okiem na niezmienne pomocników Reacta.

https://facebook.github.io/react/docs/update.html

Answer 4

Korzystanie ES6 można to zrobić tak:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value 
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array 

Spread syntax