【Javascript】配列や連想配列をディープコピーして安全な配列を取得する。【JSON.parse, JSON.stringify】

1212 ワード
配列 JSON JavaScript JavaScript テキストリンク

自分用のメモとして残します。

Reactでstateで多次元の連想配列を参照する際は普通の代入ではなくディープコピーしないと、
大元のstateに格納した値（≒要素）がsetStateしてないのに変わってしまいます。
そのため、ディープコピーをしてあげることで安全に作業用の別配列として扱えるようにします。

やり方

JSON.stringify でjson文字列にしてから JSON.parse でJson文字列をjsで使用できる形式に変換する。

//this.state = {hoges : [{hoge1:'hoge2'},{hoge10:'hoge20'}]} //左記の値がhogesに入っているとする。
let orig_hoge = this.state.hoges 
// orig_hoge をこのまま使うと、this.state.hogesの値も変えてしまうため、下記でディープコピーしてあげる。
let clone_hoge = JSON.parse(JSON.stringify(orig_hoge))

以上です。