React动态添加表单字段触发非可写长度数组索引属性TypeError如何解决

云原生阿岚

2026-9-29

报错原因

React的state是只读不可直接修改的，你用Object.assign({}, form)只做了最外层对象的浅拷贝，内部的experience数组还是和原来state里的数组指向同一个引用，这个引用在React严格模式下是被冻结的，长度属性不可写，直接调用push方法尝试修改原数组长度就会抛出这个报错。
Object.assign属于浅拷贝，只会复制对象的顶层属性，如果属性值是数组、对象这类引用类型，只会复制内存地址，不会深层复制对应的内容，所以你修改temp.experience本质还是在修改原state里的数组。

解决方案

你需要先对experience数组做一次独立拷贝，再修改新拷贝的数组，更新到新的form对象里即可，修改后的代码如下：

const addExperience = () => {
  setForm(prevForm => {
    // 先拷贝旧的experience数组，再追加新元素
    const newExperience = [...prevForm.experience, {
      company: "",
      position: "",
      startDate: "",
      endDate: "",
      description: "",
    }];
    // 返回新的form对象，其他属性保留，仅替换experience字段
    return {
      ...prevForm,
      experience: newExperience
    }
  });
}