Bagaimana untuk Memadam Item dengan Selamat daripada Susunan Negeri dalam React?

Memadamkan Item daripada Tatasusunan dalam React: Panduan

Dalam React, keadaan pengurusan adalah penting untuk mengekalkan integriti gelagat aplikasi anda dan pengalaman pengguna. Senario biasa melibatkan manipulasi tatasusunan dalam keadaan, seperti menambah, mengalih keluar atau mengemas kini item.

Untuk memahami cara memadamkan item daripada tatasusunan keadaan, mari kita pertimbangkan contoh mudah:

Anda ingin mempunyai senarai tiga orang: Bob, Sally dan Jack, disimpan dalam tatasusunan keadaan. Anda perlu boleh mengalih keluar mana-mana daripadanya daripada senarai, dan apabila dialih keluar, tatasusunan seharusnya tidak mempunyai sebarang slot kosong.

Dalam komponen React anda, anda mungkin mempunyai kod berikut:

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

Walau bagaimanapun, pelaksanaan fungsi removePeople() ini tidak akan berfungsi seperti yang dimaksudkan apabila dipanggil. Sebabnya terletak pada cara React mengendalikan mutasi keadaan.

Jangan Sekali-kali Secara Langsung Mutasi Keadaan dalam React

Apabila mengemas kini objek atau tatasusunan dalam keadaan, adalah penting untuk mencipta yang baharu salinan. Mengubahkan objek keadaan asal atau tatasusunan secara langsung boleh membawa kepada tingkah laku yang tidak dijangka dan potensi pepijat.

Dalam kes ini, memadamkan elemen daripada tatasusunan secara langsung, yang mengubah suai objek keadaan asal, tidak mencetuskan kemas kini nyatakan dalam React. Keadaan kekal tidak berubah dan UI tidak akan mencerminkan pengalihan keluar Bob daripada senarai.

Menggunakan Array.prototype.filter() untuk Pembuangan Selamat

Kepada alih keluar item daripada tatasusunan keadaan dengan cara yang serasi dengan React, terdapat beberapa pilihan. Satu kaedah yang berkesan melibatkan penggunaan Array.prototype.filter().

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

Pendekatan ini mencipta tatasusunan baharu dengan hasil yang ditapis. Dalam kes ini, ia menapis orang yang mempunyai nilai sasaran, dengan berkesan mengalih keluarnya daripada senarai. Tatasusunan baharu yang terhasil kemudiannya ditetapkan sebagai keadaan, mencetuskan kemas kini UI yang diperlukan untuk mencerminkan pengalihan keluar item.

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