浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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サイトによくある個数を変更することも

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

  • この記事いいね! (0)