👋

React : State に渡す object の deepCopy.(Hook使用)

2022/06/19に公開

State に渡す object を簡単に複製/コピーしたい

State で管理するオブジェクトを扱うときに、毎回コピーするが手間なので、

// user というオブジェクトを使う場合。
setUser( {name:'Taro' , access: state.user.access + 1 } );

シンプルに複製できないかを調べてみた。
例えば、こんな感じにしたい。

※pseudo code
const newUser = user.複製();
(newUserに対する値の設定)
setState( newUser );

単純にassignを使うと、値の変更が検知されずにdomが再描画されない。

const newUser = Object.assign( user );
newUser.access += 1;
setUser( newUser );

何らかの方法で無理やりrenderさせると内部のStateの値は変更されていることは分かるが、自動でrenderされない。assignはdeep copyとならないのが原因の様子。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
"深い複製についての注意
Object.assign() はプロパティの値をコピーするため、深い複製を行うには別な方法を使用する必要があります。"

やるのであればlodashのclonedeepを使う必要がある様子。
インストール:

npm install lodash

import&使用:

import cloneDeep from 'lodash/cloneDeep';
...
const newUser = cloneDeep(user);
newUser.access += 1;
setUser( newUser );

これで、期待通りに動く。インポートの方法は上記の書き方が容量が少なくて済む様子。
https://blog.ryou103.com/post/lodash-reduce-bundle/

Discussion

ログインするとコメントできます