使用 .push 更新组件[重复]答案

【问题标题】：Use .push to update the component [duplicate]使用 .push 更新组件[重复]
【发布时间】：2021-03-04 02:47:08
【问题描述】：

使用 .push 数组对象更新后无法更新 dom

const [people, setPeople] = React.useState(data);

const addItem = () => {
    const itemName = document.querySelector('.input').value;
    const i = people.length + 1;
    people.push({
      id: i,
      name: itemName
    });
    setPeople(people);
    console.log(people);
  }

【问题讨论】：

标签： reactjs

【解决方案1】：

那是因为 push 改变了原始状态，你不应该在 react 中手动改变状态。

相反，创建状态的浅表副本，然后使用更改后的数组推送并重置状态。

const [people, setPeople] = React.useState(data);

const addItem = () => {
    const itemName = document.querySelector('.input').value;
    const i = people.length + 1;
    const newPeople = [...people]; // Create a copy
    newPeople.push({
      id: i,
      name: itemName
    });
    setPeople(newPeople);
    console.log(newPeople);
  }

【讨论】：

谢谢@Tinkerer

【解决方案2】：

const addItem = () => {
    const itemName = document.querySelector('.input').value;
    const i = people.length + 1;

    // crate new people
    const newPeople = {
      id: i,
      name: itemName
    };

    // concat to existing peoples and set to state
    setPeople(prevState => prevState.concat(newPeople));
    console.log(people);
  }

【讨论】：