Verwenden Sie .push, um die Komponente [Duplikat] zu aktualisieren.

Nov 21 2020

Der Dom kann nicht aktualisiert werden, nachdem das .push-Array-Objekt aktualisiert wurde

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

Antworten

ThalesKenne Nov 21 2020 at 00:01

Dies liegt daran, dass Push den ursprünglichen Status ändert und Sie den Status nicht manuell ändern sollten, wenn Sie reagieren.

Erstellen Sie stattdessen eine flache Kopie Ihres Status, drücken Sie dann und setzen Sie den Status mit dem geänderten Array zurück.

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