Question

TypeError：无法定义超出不可写长度的数组末尾的数组索引属性

2021-10-28

7530

javascript reactjs frontend

我正在通过动态添加表单字段来更新表单中的状态，但出现了此错误我尝试过如果我想的话，应该发生的是，在单击时应该向每个子字段添加更多字段

const addExperience = () => {
    let temp = Object.assign({}, form);
    temp.experience.push({
      company: "",
      position: "",
      startDate: "",
      endDate: "",
      description: "",
    });
    setForm(temp);
  }

这是表单

const [form, setForm] = useState({
    name: "adarsh raj",
    email: "[email protected]",
    phone: "83404dvsdsd",
    address: "patel chowk",
    city: "deoghar",
    education: [
      {
        school: "dav ",
        major: "intermediate",
        GPA: "8.12",
      },
    ],
    experience: [
      {
        company: "venturepact llc",
        position: "associate software developer",
        startDate: "dd-mm-yyyy",
        endDate: "dd-mm-yyyy",
        description: "description",
      },
    ],
    projects: [
      {
        projectName: "project name",
        projectDescription: "project description",
      },
    ],
    skills: [
      {
        skillName: "your skill name",
      },
    ],
  });

Answer 1

我现在解决了一个类似的问题，使用扩展运算符创建一个新的数组，如下所示

const newMutableArray = [...immutableArray, newItem]

它对我来说很好用。

Answer 2

Object.assign(target, source) 只是浅拷贝。

useState 返回值是 Immutable ；

参考下面的demo

var x = new Array(10).fill(0);
Object.freeze(x);
x.push(11) // same error

可以通过 深拷贝 或者重新赋值 第一层 的经验值来解决这个问题。

因为使用了浅拷贝，所以只能对第一层赋值，如果问题属性出现在第二层就无法解决，所以不建议使用这种方式，建议使用深拷贝。

let temp = JSON.parse(JSON.stringify(form));
let temp = lodash.cloneDeep(form);// need install lodash

Answer 3

这样的代码应该可以工作。但为了测试，您可以尝试以下语法：

  const addExperience = () => {
    let temp = Object.assign({}, form);
    temp.experience = [
      ...temp.experience,
      {
        company: "",
        position: "",
        startDate: "",
        endDate: "",
        description: ""
      }
    ];
    setForm(temp);
  };