React如何更新state中数组内指定索引的对象的属性？

问题原因 #

你的代码存在三个核心错误：

• prevState指向整个状态根对象，要访问存储数组需要先取prevState.myState，你直接写prevState[0]根本拿不到目标对象
• 错误修改了myState的类型：原来的myState是数组，你的写法直接把它改成了普通对象，直接覆盖了原有结构
• 展开操作的目标错误：你展开的是字符串类型的id属性，而不是需要修改的目标对象，完全达不到属性合并的效果

另外setState是异步方法，本身没有返回值，你直接打印result只能拿到undefined，无法获取更新后的状态。

正确实现 #

遵循React状态不可变更新原则，先拷贝原数组、再拷贝目标索引的对象修改属性，代码示例如下：

this.setState(prevState => {
  // 拷贝原数组，避免直接修改原生state
  const newMyState = [...prevState.myState]
  // 拷贝指定索引的对象，修改id属性后替换原位置
  newMyState[0] = {
    ...newMyState[0],
    id: 'something'
  }
  return { myState: newMyState }
}, () => {
  // 要读取更新后的状态，需要在setState的第二个回调参数中操作
  console.log(this.state.myState)
})

内容的提问来源于stack exchange，提问作者RoktSe