React使用setState更新复杂嵌套对象数组结果异常求助

错误原因 #

你当前的代码存在两个核心问题：

1. 直接修改原状态对象：visualQueryData[0].default.default[i].class = e 直接篡改了原state的内容，违反了React状态不可变的原则，可能导致组件无法正确触发重渲染。
2. 数组末尾新增元素的根源：(visualQueryData[0].default.default[i].class = e) 是一个赋值表达式，JavaScript中赋值表达式的返回值就是被赋予的值（也就是e）。你用...p展开原数组后，又把这个返回值作为新元素追加到了数组末尾，所以才会多出那个和class值相同的元素。

正确实现（遵循不可变更新原则） #

要更新嵌套字段，需要逐层拷贝对象和数组，确保每一层都是新的引用，同时基于函数式更新的prev状态操作（避免依赖原状态的过时值）：

setVisualQueryData((prev) => {
  // 拷贝数组的第一个元素
  const updatedFirstObj = { ...prev[0] };
  // 拷贝外层的default对象
  updatedFirstObj.default = { ...updatedFirstObj.default };
  // 拷贝内层的default数组
  updatedFirstObj.default.default = [...updatedFirstObj.default.default];
  // 更新指定索引i的class字段，保留原对象其他属性
  updatedFirstObj.default.default[i] = {
    ...updatedFirstObj.default.default[i],
    class: e
  };
  // 返回新数组，替换原数组的第一个元素
  return [updatedFirstObj];
});

如果后续嵌套层级更深，也可以用Immer库简化不可变更新的代码，不过上面的原生写法已经能解决你的问题。

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