React中添加对象属性报错Cannot add property isCheck, object is not extensible怎么解决？

你遇到的Cannot add property isCheck, object is not extensible报错核心原因是你操作的symptoms数组下的对象是不可扩展的，React场景下通常有两个触发原因：

• 该对象来自组件Props或useState/useReducer维护的状态，React要求状态遵循不可变原则，禁止直接修改原对象引用
• 该对象被Object.freeze()冻结，比如部分状态管理库返回的状态值、前端做数据缓存时冻结了接口返回的原始数据

方法1：创建新对象副本（推荐，符合React不可变原则） #

不要直接修改原对象，通过展开运算符生成新对象，新增属性后替换原位置的内容，如果该数据是组件状态，需要调用状态更新方法触发重渲染。
代码示例：

const handleClickOpen = (element: ModalData) => {
  // 生成新的symptoms数组，每一项都是新增了isCheck属性的新对象
  const newSymptoms = element.symptoms.map(item => {
    return {
      ...item,
      // 原有isCheck为true则保留，否则赋值为false，和你的原有逻辑一致
      isCheck: item.isCheck ?? false
    }
  })

  // 后续业务逻辑直接操作newSymptoms即可
  newSymptoms.forEach(item => {
    if (item.isCheck) {
      console.log('true')
    }
  })

  // 如果element是组件维护的状态，需要调用更新方法替换原状态
  // 示例：setModalData(prev => ({ ...prev, symptoms: newSymptoms }))
};

方法2：强制生成可修改的对象（仅适用于非状态/非Props的局部变量场景） #

如果该数据仅作为局部变量使用，不需要响应式更新，可以通过Object.assign生成可修改的新对象覆盖原引用：

const handleClickOpen = (element: ModalData) => {
  for (let i in element.symptoms) {
    // 生成新的可扩展对象覆盖原数组项
    element.symptoms[i] = Object.assign({}, element.symptoms[i])
    if (element.symptoms[i].isCheck === true) {
      console.log('true');
    } else {
      element.symptoms[i].isCheck = false;
    }
  }
};

React场景下优先使用方法1，直接修改原状态/Props不仅会触发不可扩展报错，还可能导致组件不触发重渲染、状态更新异常等问题。

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