Reactjs 使用.push更新组件

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

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);
  }

---

这是因为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);
  }

---

这是因为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);
  }

---

谢谢@TinkererThanks@Tinkerer