Используйте .push, чтобы обновить компонент [дубликат]

Question

Не удается обновить дом после обновления объекта массива .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);
  }

Answer 1

Это связано с тем, что push изменяет исходное состояние, и вы не должны изменять состояние вручную в response.

Вместо этого создайте неглубокую копию своего состояния, затем нажмите, а затем сбросьте состояние с измененным массивом.

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