JavaScript报错：无法为对象只读属性'id'赋值，求解决方案

错误原因分析 #

1. TypeError: Cannot assign to read only property 'id'：你直接操作的parent对象处于只读状态（可能是被Object.freeze()冻结，或是来自Redux状态、API返回这类不可变数据源），无法直接修改它的属性。
2. undefined is not a function：你错误地把id属性当成方法调用，但它本身是普通属性，自然会触发报错。

正确修改方式 #

不要直接修改原对象，而是创建一个可修改的对象副本，在副本上调整字段：

方式1：使用扩展运算符（推荐，写法简洁）

const finalItems: any = [];
data.items.forEach((parent: any) => {
  // 创建原对象的副本，同时覆盖/添加需要的字段
  const modifiedParent = {
    ...parent,
    id: parent.productId,
  };
  // 删除不需要的字段
  delete modifiedParent.links;

  finalItems.push({
    node: modifiedParent,
    key: modifiedParent.id,
  });
});
return finalItems; // 注意原代码返回的是items，这里应该返回构建好的finalItems

方式2：使用Object.assign

const finalItems: any = [];
data.items.forEach((parent: any) => {
  // 创建空对象并复制原parent的属性
  const modifiedParent = Object.assign({}, parent);
  // 修改id字段
  modifiedParent.id = parent.productId;
  // 删除不需要的字段
  delete modifiedParent.links;

  finalItems.push({
    node: modifiedParent,
    key: modifiedParent.id,
  });
});
return finalItems;

额外提示 #

• 如果parent是嵌套对象，扩展运算符和Object.assign仅做浅拷贝，若需要深拷贝可以使用JSON.parse(JSON.stringify(parent))（注意这种方式会丢失函数、Symbol等特殊类型），或者使用专门的深拷贝工具。
• 原代码最后返回items是错误的，应该返回你构建的finalItems数组。

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