☰

React.js での状態配列の正しい変更 質問する

tag-icon • tag-icon javascript reactjs
React.js での状態配列の正しい変更 質問する

配列の末尾に要素を追加したいのですstateが、これは正しい方法でしょうか?

this.state.arrayvar.push(newelement);
this.setState({ arrayvar:this.state.arrayvar });

配列をその場で変更するとpush問題が発生するのではないかと心配していますが、安全でしょうか?

配列のコピーを作成してsetStateそれを実行するという代替手段は、無駄に思えます。

ベストアンサー1

のReactドキュメント言う：

this.state を不変であるかのように扱います。

状態pushを直接変更すると、後で状態を再度「リセット」する場合でも、エラーが発生しやすいコードになる可能性があります。たとえば、次のような一部のライフサイクル メソッドがcomponentDidUpdateトリガーされなくなる可能性があります。

以降の React バージョンで推奨されるアプローチは、競合状態を防ぐために状態を変更するときにアップデータ関数を使用することです。

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
}))

非標準の状態変更を使用した場合に発生する可能性のあるエラーと比較すると、メモリの「無駄」は問題ではありません。

以前のReactバージョン用の代替構文

concat新しい配列を返すため、クリーンな構文を取得するために使用できます。

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

ES6では、スプレッド演算子:

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})

おすすめ記事