数据保存后更新触发数组非可写长度错误，求解决方案

开发者阿泽

2026-7-18

问题解决思路

这个错误的核心原因是：从数据库返回的数据里，children数组的length属性被设置为不可写（比如数据被Object.freeze冻结，或者ORM框架返回了不可变的对象结构）。你之前的浅拷贝只复制了companies数组的第一层，但children还是引用原数组，直接调用splice修改时，因为原数组的length不能被修改，就触发了报错。

具体修复方案

方案1：修改删除逻辑，确保操作可写的新数组

把要修改的children数组先拷贝成一个新的可写数组，再执行删除操作：

const handleDeleteDepartment = (companyIndex, departmentIndex) => {
  if (departmentIndex !== 0) {
    // 浅拷贝companies数组
    const newCompanies = [...companies];
    // 深拷贝目标company对象，重点复制children为新数组
    const targetCompany = {
      ...newCompanies[companyIndex],
      children: [...newCompanies[companyIndex].children]
    };
    // 在新数组上执行删除
    targetCompany.children.splice(departmentIndex, 1);
    // 更新到新companies数组中
    newCompanies[companyIndex] = targetCompany;
    setCompanies(newCompanies);
  }
};

方案2：在获取数据库数据时预处理，转换为可写结构

如果从数据库拿到的整个数据结构都是不可变的，在存入状态前就把所有children数组转换成可写的：

// 示例：获取数据库数据后处理
const getCompaniesFromDB = async () => {
  const rawData = await yourDBQueryFunction();
  // 遍历每个公司，将children转为新数组
  const writableData = rawData.map(company => ({
    ...company,
    children: [...company.children]
  }));
  setCompanies(writableData);
};