React中修改数组对象属性时触发只读属性报错

API 探路者

2026-8-3

问题分析与解决

报错原因

你用[...produtosComplementares]做的浅拷贝，只是复制了数组的外层结构，但数组里的每个对象还是指向API返回的只读对象（大概率是API返回的数据被冻结，或者在运行环境的严格模式下被标记为只读）。直接修改这些对象的属性自然会触发只读属性的报错。

另外你的代码里还有个明显的语法错误：if(item.codigoProduto == 2{ 少了一个闭合括号)，这个也会导致代码运行异常。

解决方案

核心思路是：给数组里的每个对象创建独立的可修改副本，而不是直接操作原只读对象。下面是几种可行的实现方式：

方式1：用对象展开语法生成新对象

// 修正语法错误 + 生成对象副本
let arrayTemporario: any = produtosComplementares.map((item: any) => {
  // 先复制原对象的所有属性到新对象
  const newItem = { ...item };
  if (item.codigoProduto === 2) {
    newItem.quantidadeMaxima = 3;
  }
  return newItem;
});

方式2：用`Object.assign`创建新对象

和展开语法效果一致，适合兼容性要求更高的场景：

let arrayTemporario: any = produtosComplementares.map((item: any) => {
  const newItem = Object.assign({}, item);
  if (item.codigoProduto === 2) {
    newItem.quantidadeMaxima = 3;
  }
  return newItem;
});

方式3：处理嵌套对象的深拷贝

如果你的对象里还有嵌套的子对象，上面两种浅拷贝对象的方式就不够了，可通过JSON序列化反序列化生成完全独立的副本：

let arrayTemporario: any = produtosComplementares.map((item: any) => {
  // 序列化再反序列化，生成和原对象完全独立的副本
  const newItem = JSON.parse(JSON.stringify(item));
  if (item.codigoProduto === 2) {
    newItem.quantidadeMaxima = 3;
  }
  return newItem;
});