React中更新数组对象属性的方式是否正确？是否需用prevState？

直接修改状态的问题 #

你现在用objArray[1].name = "Xxx"的方式直接修改数组内对象，完全不符合React状态更新规范。核心原因是React的状态设计遵循不可变性原则：直接修改原状态对象/数组时，原引用没有发生变化，React通过浅比较会判定状态未更新，不会触发组件重新渲染；而且这种写法会打乱状态的可追踪性，后续排查渲染异常、状态变更类的bug会变得异常麻烦。

正确的状态更新方式 #

必须通过setObjArray更新状态，且要保证不修改原数组/对象，而是生成全新的状态副本。常见的两种规范写法如下：

1. 基于当前状态生成新数组（适合无依赖的单次更新） #

setObjArray(
  objArray.map(item => 
    item.id === 1 ? {...item, name: "Xxx"} : item
  )
);

通过map遍历原数组，找到id=1的对象时，用扩展运算符...复制原对象的所有属性，再覆盖name字段；其余对象直接返回原引用。这种方式既保留了原状态的不可变性，又生成了新的数组引用，能正确触发React重新渲染。

2. 使用prevState参数（适合依赖前序状态的更新） #

setObjArray(prevState => 
  prevState.map(item => 
    item.id === 1 ? {...item, name: "Xxx"} : item
  )
);

当你的状态更新依赖上一次的状态值（比如连续多次触发更新、异步回调中更新状态），prevState能确保你拿到的是最新的状态快照，避免React批量更新机制导致的旧状态覆盖问题，让更新逻辑更可靠。

哪种方式更合理？ #

• 如果是单次、不依赖前序状态的修改，两种写法都可行，第一种代码更简洁。
• 如果是依赖前序状态的更新（比如累加操作、异步场景），必须使用prevState的写法，否则可能出现状态不一致的bug。

总结：永远不要直接修改React状态，必须通过状态更新函数，基于不可变性生成新的状态值。

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