「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > 「setState」を使用して状態のネストされたオブジェクトを更新するにはどうすればよいですか?

「setState」を使用して状態のネストされたオブジェクトを更新するにはどうすればよいですか?

2024 年 11 月 17 日に公開
ブラウズ:972

How to Update a Nested Object in State Using `setState`?

setState

を使用して状態の state.item[1] を更新します。この状況では、オブジェクト内のオブジェクトを更新しようとしています。 setState を使用して状態を設定します。状態を正しく更新するには、状態オブジェクト全体のコピーを作成し、そのコピーを変更して、更新されたコピーに状態を設定する必要があります。

ここでは、state.item[1] を更新する方法を説明します。 setState:

// 1. Make a shallow copy of the items
let items = [...this.state.items];

// 2. Make a shallow copy of the item you want to mutate
let item = {...items[1]};

// 3. Replace the property you're interested in
item.name = 'newName';

// 4. Put it back into our array. N.B. we *are* mutating the array here, 
//    but that's why we made a copy first
items[1] = item;

// 5. Set the state to our new copy
this.setState({items});

必要に応じてステップ 2 と 3 を組み合わせることができます:

let item = {
    ...items[1],
    name: 'newName'
}

または、すべてを 1 行で実行することもできます:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

注: これらの例では、項目が配列であると仮定しました。項目がオブジェクトの場合は、オブジェクトのプロパティに対して同様の更新を行います。

setState を使用するときは、誤って変更しないように、変更する前に常に前の状態のコピーを作成する必要があることに注意してください。元の状態オブジェクト。

最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3