.push를 사용하여 구성 요소 업데이트 [중복]
Nov 21 2020
.push 배열 개체를 사용하여 업데이트 한 후 DOM을 업데이트 할 수 없습니다.
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);
}
답변
ThalesKenne Nov 21 2020 at 00:01
푸시가 원래 상태를 변경하고 반응에서 수동으로 상태를 변경해서는 안되기 때문입니다.
대신 상태의 얕은 복사본을 만든 다음 변경된 배열로 상태를 푸시 한 다음 재설정하십시오.
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);
}