ใช้. push เพื่ออัปเดตคอมโพเนนต์ [ซ้ำ]

Question

ไม่สามารถอัปเดต dom หลังจากใช้. push array object ได้รับการอัปเดต

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

Answer 1

นั่นเป็นเพราะการพุชเปลี่ยนสถานะดั้งเดิมและคุณไม่ควรเปลี่ยนสถานะด้วยตนเองในการตอบสนอง

ให้สร้างสำเนาตื้นของสถานะของคุณแทนจากนั้นกดแล้วรีเซ็ตสถานะด้วยอาร์เรย์ที่เปลี่ยนแปลง

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

Answer 2

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