Sử dụng .push để cập nhật thành phần [bản sao]

Question

Không thể cập nhật dom sau khi sử dụng đối tượng mảng .push được cập nhật

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

Answer 1

Đó là bởi vì push thay đổi trạng thái ban đầu và bạn không nên thay đổi trạng thái theo cách thủ công trong phản ứng.

Thay vào đó, hãy tạo một bản sao nông của trạng thái của bạn, sau đó đẩy và sau đó đặt lại trạng thái với mảng đã thay đổi.

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

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