React中如何更新嵌套对象数组？替换prop1.mainList.list2值

你的代码问题在于展开运算符的层级完全错误，直接展开prop1.mainList.list2和prop2.list2会把数组里的每个元素当作键值对塞到外层对象里，根本没触碰到prop1.mainList下的list2属性。

正确的写法 #

要更新嵌套层级里的属性，需要逐层展开并替换目标属性：

// 先复制原对象，再逐层替换嵌套属性
const updatedProps = {
  ...prop1,
  mainList: {
    // 复制原mainList的所有属性（list1、list3）
    ...prop1.mainList,
    // 把list2替换成prop2里的新值
    list2: prop2.list2
  }
};

const { output } = renderList(updatedProps);

进阶：如果prop2有多个属性要合并到mainList #

如果后续prop2可能包含list1、list3这类需要覆盖mainList的其他属性，可以直接把prop2展开到mainList里：

const updatedProps = {
  ...prop1,
  mainList: {
    ...prop1.mainList,
    // 一次性覆盖mainList中与prop2同名的所有属性
    ...prop2
  }
};

这样就能精准替换mainList.list2的值，同时保留原对象的其他属性不被修改。

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