Bagaimana untuk Memadam Item daripada Susunan Negeri dalam Reaksi Semasa Mengekalkan Ketidakbolehubahan?

React: Memadam Item daripada Susunan Keadaan

Dalam React, mengekalkan data dengan berkesan adalah penting. Apabila bekerja dengan tatasusunan dalam keadaan, adalah penting untuk mengekalkan kebolehubahan. Mengubah suai tatasusunan secara langsung boleh membawa kepada tingkah laku yang tidak dijangka.

Cabaran

Bayangkan senario di mana individu "Bob," "Sally," dan "Jack" disimpan dalam tatasusunan negeri "orang." Matlamatnya adalah untuk mengalih keluar individu, seperti "Bob," daripada tatasusunan tanpa meninggalkan slot kosong.

Penyelesaian Yang Salah

Kaedah removePeople() yang dibentangkan cuba memadam item dengan menetapkan elemen tatasusunan pada indeks yang dikehendaki kepada tidak ditentukan. Walau bagaimanapun, pendekatan ini mengubah keadaan secara langsung, melanggar prinsip kebolehubah React.

Cara Reaksi

Untuk mengalih keluar item daripada tatasusunan keadaan dengan sewajarnya, elakkan daripada mengubahnya secara langsung. Sebaliknya, buat tatasusunan baharu dengan kandungan yang diubah suai:

removePeople(e) {
    const updatedPeople = this.state.people.filter(person => person !== e.target.value);
    this.setState({people: updatedPeople});
}

Filter() to the Rescue

Array.prototype.filter() ialah alat yang berkuasa untuk mencipta tatasusunan baharu berdasarkan syarat yang ditetapkan. Dalam kes ini, ia digunakan untuk mengecualikan orang sasaran daripada tatasusunan "orang" asal.

Ketidakbolehubahan adalah Kunci

React sangat bergantung pada struktur data tidak berubah. Mengekalkan kebolehubahan memastikan konsistensi data, mengelakkan mutasi keadaan yang tidak dijangka dan memudahkan penyahpepijatan. Dengan mencipta contoh tatasusunan baharu, seperti yang ditunjukkan dalam pendekatan penapis(), anda mengekalkan prinsip kritikal ini dalam pembangunan React.

Atas ialah kandungan terperinci Bagaimana untuk Memadam Item daripada Susunan Negeri dalam Reaksi Semasa Mengekalkan Ketidakbolehubahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!