如何在 React 中使用 `setState` 更新 `state.item[1]`？-js教程-PHP中文网

如何在 React 中使用 `setState` 更新 `state.item[1]`？

Linda Hamilton

发布： 2024-11-02 16:07:02

原创

630 人浏览过

How to Update `state.item[1]` with `setState` in React?

如何使用 setState 更新 State.item[1]

在 React 应用程序中，更新数组或对象的状态可能很棘手。本文将引导您了解如何使用 setState 在状态中更新 state.item[1]，这是 React 中的常见任务。

问题

在提供的 React 组件中，目标是创建用户可以设计自己的字段的动态表单。状态最初看起来像这样：

this.state.items[1] = {
  name: 'field 1',
  populate_at: 'web_start',
  same_as: 'customer_name',
  autocomplete_from: 'customer_name',
  title: ''
};

登录后复制

当用户更改任何值时尝试更新状态时会出现问题。定位正确的对象变得很困难。

解决方案

要正确更新状态，请按照以下步骤操作：

制作项目的浅表副本。
制作您想要变异的项目的浅表副本。
替换您感兴趣的属性。
将其放回数组中。请注意，您要在此处更改数组，这就是为什么首先创建副本至关重要。
将状态设置为新副本。

示例实现：

handleChange: function (e) {
  // 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 intested 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'}

登录后复制

单行实现：

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

登录后复制

以上是如何在 React 中使用 `setState` 更新 `state.item[1]`？的详细内容。更多信息请关注PHP中文网其他相关文章！