更新嵌套状态的命令式方法

在 React 中，状态更新是不可变的。这意味着要更新嵌套对象或数组，您不能简单地修改其属性并期望更改反映在 UI 中。相反，您需要创建一个包含更新值的新对象或数组，然后将其传递给 setState。

考虑以下示例，其中我们要更新对象中索引 1 处的对象的 name 属性存储在状态中的项目数组：

handleChange: function (e) {
  // Make a copy of the items array
  let items = [...this.state.items];

  // Make a copy of the item object at index 1
  let item = {...items[1]};

  // Change the name property of the copied item
  item.name = 'New Name';

  // Replace the item at index 1 with the updated item
  items[1] = item;

  // Update the state with the new items array
  this.setState({items});
},

在这种方法中，我们使用扩展语法 (...) 创建 items 数组和索引 1 处的 item 对象的浅拷贝。然后，我们修改复制项的 name 属性并替换索引 1 处的项目具有更新版本。最后，我们用新的 items 数组更新状态。

这种方法很简单，并且适用于简单的状态更新。然而，对于涉及多个嵌套对象或数组的复杂状态更新来说，它可能会变得麻烦且容易出错。