今回は配列の中のオブジェクトの値を部分的に変える方法についてです。
本当はこれでなくても全然同じ動きができるのですが、react色の濃いコードを
共有したいと思い選択しました。
例えば、以下のような配列があったとします。
const options = [
{id: 1, name:”john”, birthday: ‘19900412’, value: false},
{id: 2, name:”hiro”, birthday: ‘19910906’, value: false},
];
配列の中にid,name,birthday,valueとありますが、今回はこの中の
birthdayだけを変えて再度setStateをしたい場面を仮定します。
一般的にstateはsetState({hoge: “hoge”})で更新することができますが
これにならってsetState({option: this.state.option[‘birthday’]})で更新しようと
しても値を更新することはできません。
これは、react自身が従来のjavascriptのようなオブジェクトを指定して代入ということができない仕様となっているため
です。代替え手段としてprevStateを使った部分的な更新方法があります。
このprevStateというのは更新される前のstate「option」であり、このprevStateから
map関数で新しいstateを生成する仕組みになっています。
このコードではmapの中のObject.assign()でn番目のbirthdayを適当な値に更新してsetStateを更新しています。
this.setState(prevState => ({
options: prevState.options.map(
obj => (obj.id === 1 ? Object.assign(obj, { birthday: “19920912” }) : obj)
)
}));
render辺りでthis.state.optionの中身を確認してみてください。部分的に変更ができていると
思います。
プロジェクトに慣習がなければreactのオブジェクトにおけるsetStateはこれで良さげ。
