Redux衍生对象数组元素修改报错：无法赋值给只读属性

错误原因 #

你遇到的报错是因为 浅拷贝只复制了对象本身，但嵌套的imageUrls数组仍然指向Redux原数组的引用。Redux中的状态是不可变的（通常会被冻结或标记为只读），直接修改这个数组的元素会触发只读属性的报错。

你之前的代码中，{...prevState}仅创建了对象的浅拷贝，copy.imageUrls还是原来的数组，所以尝试修改copy.imageUrls[i]本质上是在修改Redux的只读数组，导致报错。

正确解决方案 #

需要同时拷贝对象和嵌套的数组，确保修改的是新数组而非原Redux状态。以下两种方式都可行：

方式1：手动拷贝数组后修改

setProduct((prevState) => {
  // 浅拷贝对象
  const newProduct = {...prevState};
  // 拷贝数组（扩展运算符做浅拷贝足够，因为数组元素是字符串）
  newProduct.imageUrls = [...newProduct.imageUrls];
  // 修改新数组的指定元素
  newProduct.imageUrls[i] = "";
  return newProduct;
});

方式2：使用map生成新数组（更符合不可变数据规范）

setProduct((prevState) => ({
  ...prevState,
  imageUrls: prevState.imageUrls.map((url, idx) => idx === i ? "" : url)
}));

map方法会返回一个全新的数组，直接替换原数组属性，完全避免了对原数组的修改。

额外提示 #

你当前用useState(useSelector(...))的方式存在隐患：useState的初始值只在组件首次渲染时生效，如果Redux中的products数据后续更新，本地的product状态不会同步更新。如果你的组件需要始终和Redux状态保持一致，建议直接使用useSelector获取数据，而非存入useState：

const product = useSelector(selectProducts).find((item) => item.id === id);

只有当你需要在本地修改数据（暂时不同步到Redux）时，才需要将Redux数据存入useState。

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