1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

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)) 

以上です。

1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?