无法使用 React js 将数据推送和附加到状态

Question

这里我用数据说明

state = {
    Response: [
      {
        "id": "15071",
        "name": "John",
        "salary": "53",
        "age": "23",
        "department": "admin"
      },
      {
        "id": "15072",
        "name": "maxr",
        "salary": "53",
        "age": "23",
        "department": "admin"
      },
      {
        "id": "15073",
        "name": "Josef",
        "salary": "53",
        "age": "23",
        "department": "admin"
      },
      {
        "id": "15074",
        "name": "Ye",
        "salary": "53",
        "age": "23",
        "department": "admin"
      }
    ]

我正在表格中显示这些记录。在表格中，您将看到 10 条记录，并且表格顶部会有一个按钮，因此如果按下附加按钮，则必须在每次按下按钮时添加 10 条记录，并且数据必须相同，但必须使用以下内容附加逻辑我试图通过推送 10 条记录来设置状态，如果我有 1,2,3,4,5,6,7,8,9,10 如果我按下附加 1,2,3 则尝试附加它,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10 必须追加

appendEmployees() {
  var reLoadCount = 1;
  for (let i = 0; i < 10; i++) {
    const myObj = {
      id: 0,
      name: '',
      salary: 0,
      department: ''
    };
    myObj.id = +this.setState.employee[i].id + (reLoadCount * 10);
    myObj.name = this.setState.employee[i].name;
    myObj.salary = this.setState.employee[i].salary;
    myObj.department = this.setState.employee[i].department;
    this.setState.employee.push(myObj);
  }
  reLoadCount++;
}

我在这里做错了什么

Answer 1

如果我猜对了，您将尝试在 this.state.employee 数组中添加 10 个对象副本，这些新对象与现有对象之间的唯一区别是它们的 id。

如果是这样，您可以这样做：

appendEmployees() {
  this.setState(prevState => {
    // Get the biggest ID number.
    const maxId = Math.max(...prevState.employee.map(e => parseInt(e.id)));
    // create 10 new employees copies of the first 10.
    const newEmployees = prevState.employee.slice(0, 10).map((e, i) => ({
      ...e,
      id: (maxId + i + 1)
    }));
    // return/update the state with a new array for "employee" that is a concatenation of the old array and the array of the 10 new ones.
    return {
      employee: [...prevState.employee, ...newEmployees]
    }
  });
}

我在示例中添加了一些 cmets 来解释它的作用。

重要的是this.setState，它是用于更新状态的函数，在这里，我将它与函数一起用作第一个参数（它也适用于对象），我这样做是因为它是生成从旧状态派生的新状态的首选方式。