Utilisez .push pour mettre à jour le composant [dupliquer]
Nov 21 2020
Impossible de mettre à jour le dom après avoir utilisé l'objet de tableau .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);
}
Réponses
ThalesKenne Nov 21 2020 at 00:01
En effet, push modifie l'état d'origine et vous ne devez pas modifier l'état manuellement dans react.
À la place, créez une copie superficielle de votre état, puis appuyez sur puis réinitialisez l'état avec le tableau modifié.
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);
}