Next.js结合Recoil用map修改数组对象报只读属性赋值错误怎么办

• Recoil 内部会使用 Object.freeze 冻结所有托管的状态值，从机制层面禁止直接修改状态的原始引用，这就是触发「Cannot assign to read only property」报错的直接原因。
• 你当前的实现存在两个典型问题：
  1. 调用 allData.map() 时没有接收返回值，只在遍历过程中直接修改原数组元素的属性，相当于直接给被冻结的只读对象赋值，必然触发报错
  2. 你听说的 slice() 方法本质是浅拷贝，只靠它无法完全规避报错：slice 只会生成新的数组结构，数组内存储的对象引用仍然指向原来被冻结的只读对象，顺着这个引用修改对象属性依然会触发同样的错误。

适配当前场景的最优写法：map + 对象展开 #

map 方法天生会遍历数组并返回一个全新的数组引用，不需要额外借助 slice 做拷贝，匹配到目标 id 时直接生成全新的对象覆盖原值即可，完全符合不可变更新的要求：

const edit = (listId, value) => {
  setAllData(prevState => 
    prevState.map(item => 
      item.id === listId 
        // 生成全新的对象，和原只读引用完全脱钩
        ? { ...item, value }
        : item
    )
  )
}

这种写法基于上一次的状态值生成新状态，不会受闭包缓存的旧值影响，也是React生态通用的状态更新规范。

结合 slice 的实现写法 #

如果你已经熟悉 slice 的使用逻辑，可以参考下面的写法，这里要特别注意浅拷贝的边界：

const edit = (listId, value) => {
  // 先定位到目标元素的索引
  const targetIndex = allData.findIndex(item => item.id === listId)
  // 找不到对应项直接跳出逻辑
  if (targetIndex === -1) return

  // 用slice生成全新的数组引用，和原数组脱钩
  const newArr = allData.slice()
  // *常见错误写法*：直接修改数组里原对象的属性，还是会触发只读报错
  // newArr[targetIndex].value = value
  // 正确写法：给对应索引赋值一个全新的对象，切断对原只读对象的引用
  newArr[targetIndex] = { ...newArr[targetIndex], value }

  setAllData(newArr)
}

踩坑提醒：很多人以为做完 slice 拷贝就安全了，本质是没搞懂浅拷贝的特性——浅拷贝只拷贝一层结构，数组内部的对象引用还是指向原始的只读状态，不把这个引用替换成新对象，报错还是会出现。

React 内置的 useState 本身不会主动冻结状态值，虽然官方一直要求遵循不可变更新原则，但开发者直接修改原对象属性时不会触发硬报错，只会出现视图不更新的隐性bug。接入Recoil之后，框架主动把这些隐性的违规操作变成了显式的运行时报错，本质上是帮你提前规避了状态管理的常见问题。 #

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