状態配列にプッシュする正しい方法

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

私はあなたが、戻り値が配列であることを期待推測します。

不変

それが反応の振る舞いむしろだようだ：

SETSTATEを（呼び出して、直接this.stateを変異決して）その後 あなたが作った突然変異を交換することができます。それが 不変であるかのようにthis.stateを扱います。

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の不変性ヘルパーを見ることもできます。それは次のように行うことができますES6使用

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

Answer 4

：

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

Spread syntax