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