如何使用'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中文网其他相关文章！