如何更简洁地更新组件state中的对象数组属性？

嘿，你的现有代码能正常工作已经很靠谱啦！要是想让它更简洁优雅，这里有几个更符合React最佳实践的方案：

方案一：使用Array.map()（最推荐） #

这是处理这类数组state更新最常用也最简洁的方式，利用map遍历数组，只修改匹配目标id的项，其他项保持原样，同时用函数式更新的setState确保依赖前一次state的正确性：

onUpdate = (id) => {
  this.setState(prevState => ({
    todos: prevState.todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    )
  }));
}

为什么这个更好？ #

• 代码更紧凑，不需要手动查找索引、切片拼接数组，减少冗余代码
• 使用函数式setState，避免因为React state异步更新导致的状态不一致问题
• 完全遵循immutable更新原则，不会直接修改原数组或对象，符合React的设计理念

方案二：结合Object.assign实现（如果你偏好这种写法） #

你之前尝试Object.assign没成功，是因为它是用来处理对象的，不过我们可以在修改单个todo对象时使用它，搭配map同样能实现简洁的更新：

onUpdate = (id) => {
  this.setState(prevState => ({
    todos: prevState.todos.map(todo => 
      todo.id === id ? Object.assign({}, todo, { completed: !todo.completed }) : todo
    )
  }));
}

这个写法和方案一本质一样，只是用Object.assign来创建新的todo对象，而不是展开运算符，效果完全相同，看你个人代码风格偏好就行。

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