👋
React : State に渡す object の deepCopy.（Hook使用）
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とならないのが原因の様子。
"深い複製についての注意
Object.assign() はプロパティの値をコピーするため、深い複製を行うには別な方法を使用する必要があります。"
やるのであればlodashのclonedeepを使う必要がある様子。
インストール：
npm install lodash
import&使用：
import cloneDeep from 'lodash/cloneDeep';
...
const newUser = cloneDeep(user);
newUser.access += 1;
setUser( newUser );
これで、期待通りに動く。インポートの方法は上記の書き方が容量が少なくて済む様子。
Discussion