Użyj .push, aby zaktualizować komponent [duplikat]

Nov 21 2020

Nie można zaktualizować domeny po zaktualizowaniu obiektu tablicy przy użyciu .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);
  }

Odpowiedzi

ThalesKenne Nov 21 2020 at 00:01

Dzieje się tak, ponieważ push zmienia oryginalny stan i nie powinieneś zmieniać stanu ręcznie w reakcji.

Zamiast tego utwórz płytką kopię swojego stanu, a następnie wciśnij, a następnie zresetuj stan ze zmienioną tablicą.

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);
  }
RajithaUdayanga Nov 21 2020 at 00:04
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);
  }