データを状態配列にプッシュする問題があるようです。私はこのようにしてそれを達成しようとしています:
this.setState({ myArray: this.state.myArray.Push('new value') })
しかし、これは間違った方法であり、可変性の問題を引き起こすと思いますか?
this.state.myArray.Push('new value')
は、配列そのものではなく、拡張配列の長さを返します。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Push
戻り値が配列であることを期待していると思います。
それはむしろReactの振る舞いだと思われます。
後でsetState()を呼び出すと、行った変更が置き換えられる可能性があるため、this.stateを直接変更しないでください。これが不変であるかのようにthis.stateを扱います。
私は思います、あなたはこのようにするでしょう(Reactに慣れていない):
var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })
Es6を使うと、これは次のようになります。
this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array
状態を直接変更することは絶対にお勧めしません。
最近のReactバージョンで推奨されるアプローチは、競合状態を防ぐために状態を変更するときにアップデータ関数を使うことです。
文字列を配列の末尾にプッシュする
this.setState(prevState => ({
myArray: [...prevState.myArray, "new value"]
}))
文字列を配列の先頭にプッシュする
this.setState(prevState => ({
myArray: ["new value", ...prevState.myArray]
}))
オブジェクトを配列の末尾にプッシュする
this.setState(prevState => ({
myArray: [...prevState.myArray, {"name": "object"}]
}))
オブジェクトを配列の先頭にプッシュする
this.setState(prevState => ({
myArray: [ {"name": "object"}, ...prevState.myArray]
}))
.concat
メソッドを使用して、新しいデータで配列のコピーを作成できます。
this.setState({ myArray: this.state.myArray.concat('new value') })
しかし、配列を渡すときの.concat
メソッドの特別な振る舞いに注意してください - [1, 2].concat(['foo', 3], 'bar')
は[1, 2, 'foo', 3, 'bar']
になるでしょう。
あなたはその状態をまったく操作してはいけません。少なくとも直接ではありません。もしあなたがあなたの配列を更新したいのなら、あなたはこのようなことをしたいでしょう。
var newStateArray = this.state.myArray.slice();
newStateArray.Push('new value');
this.setState(myArray: newStateArray);
状態オブジェクトを直接操作することは望ましくありません。 Reactの不変性ヘルパーも見てください。
このコードは私のために働きます:
fetch('http://localhost:8080')
.then(response => response.json())
.then(json => {
this.setState({mystate: this.state.mystate.Push.apply(this.state.mystate, json)})
})
また、u UI(つまりur flatList)を最新の状態にしたい場合は、PrevStateを使用します。以下の例では、ユーザーがボタンをクリックすると、新しいオブジェクトがリストに追加されます(モデルとUIの両方)。 )
data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}.