正確的方式推入狀態陣列

Question

我似乎有問題推送數據到狀態數組。 我想實現這樣說：

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

但我相信這是不正確的方法和出現問題的原因可變性？

Answer 1

陣列推返回長度

this.state.myArray.push('new value')返回而非陣列本身擴展陣列的長度，。

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

我猜你所期望的返回值是數組。

不變性

看來這是相當陣營的行爲：

從來沒有直接發生變異this.state，如調用的setState（）之後可能 代替您作出的突變。對待這個狀態，就好像它是不可變的 。

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

我猜，你會做這樣的（不熟悉的反應）：

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

Answer 2

您可以使用.concat方法來創建你的數組新數據的副本：

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

但是，當傳遞數組時，要小心.concat方法的特殊行爲 - [1, 2].concat(['foo', 3], 'bar')將導致[1, 2, 'foo', 3, 'bar']。

Answer 3

你根本不應該操作狀態。至少，不直接。如果你想更新你的數組，你會想要做這樣的事情。

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

直接處理狀態對象並不可取。你也可以看看React的不變性助手。

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

Answer 4

使用ES6它可以這樣做：

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

Spread syntax