【react】スプレット演算子を使ってstateを部分的に加工する

タイトルの通りです。

スプレット演算子は、現在扱っているオブジェクトのかたまりを

以下のようにして変数に収めることでオブジェクトの要素の一部分を

変更することができます。

以下のオブジェクトをスプレット演算子を使って部分的に変更する場合

対象となるオブジェクト

[json]

cartList_data{
{
id : 1,
name : sato,
count : 1
}
{
id : 2,
name : suzuki,
count : 6
}
{
id : 3,
name : kubota,
count : 11
}
}

[/json]

//reactでの使い方

</pre>
constructor(props) {
super(props);
this.state = {
cartList_data: []
}

componentDidMount() {
const culc_result = {...this.state};
//nameでもidでも変えられる
culc_result.cartList_data[0].count = 5;
this.setState({culc_result});
}
<pre>

例ではcomponentDidMountで一回しか変更できないように

していますが、クリックしたボタンのidと配列の番号を紐付けることで

いいねの数を変更したりECサイトによくある個数を変更することも

できるので使いこなせるようになると結構便利。