如何使用「setState」更新狀態中的巢狀物件？

使用setState 更新state.item[1]

在這種情況下，您正在嘗試更新物件中的物件使用setState 在在您的狀態中。若要正確更新狀態，您需要複製整個狀態對象，修改副本，然後將狀態設定為更新後的副本。

以下是如何使用以下方法更新state.item[1] setState:

<code class="javascript">// 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});</code>

如果需要，您可以合併步驟2 和3：

<code class="javascript">let item = {
    ...items[1],
    name: 'newName'
}</code>

或者您可以在一行中完成整個操作：

<code class="javascript">this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));</code>

注意：在這些範例中，我們假設items 是一個陣列。如果 items 是對象，您將對對象屬性進行類似的更新。

請記住，在使用 setState 時，您應該始終在修改之前複製先前的狀態，以確保不會意外發生變更原始狀態物件。

以上是如何使用「setState」更新狀態中的巢狀物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！