[解決済み】React.jsの状態配列の正しい修正について

質問

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

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

でインプレースで配列を変更することが心配です。 push という問題が発生する可能性がありますが、大丈夫でしょうか？

配列のコピーを作るという選択肢と setState というのは無駄な気がします。

どのように解決するのか？

その Reactのドキュメント は言う。

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

あなたの push は状態を直接変更するので、たとえ後で状態をリセットしていたとしても、潜在的にエラーを起こしやすいコードを導く可能性があります。例えば、以下のようなライフサイクル・メソッドがあります。 componentDidUpdate が発動しない。

React の次期バージョンで推奨されているのは アップデータ 関数は、競合状態を防ぐために状態を変更するときに使用します。

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

非標準の状態変更で直面する可能性のあるエラーに比べれば、メモリの無駄遣い"aste"は問題ではありません。

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

を使用することができます。 concat を使用すると、新しい配列を返すので、きれいな構文になります。

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

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

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