Bagaimana untuk mengemas kini objek secara kekal dalam tatasusunan dalam keadaan bertindak balas?

Mengemas kini Objek Keadaan dalam Tatasusunan ReactJS

Apabila bekerja dengan tatasusunan sebagai sebahagian daripada keadaan aplikasi, anda mungkin menghadapi keperluan untuk mengemas kini objek individu dalam tatasusunan tersebut. Ini adalah tugas biasa apabila mengurus data pengguna, nilai borang atau kandungan dinamik lain.

Mengendalikan Kemas Kini Negeri

Dalam contoh yang disediakan, komponen CommentBox ditakrifkan dengan keadaan awal yang mengandungi tatasusunan objek komen. Fungsi handleCommentEdit bertanggungjawab untuk mengemas kini ulasan dengan id dan teks yang ditentukan.

Ketidakbolehubahan dalam React

Salah satu prinsip teras React ialah penggunaan keadaan tidak berubah. Ini bermakna objek keadaan asal tidak boleh diubah secara langsung. Sebaliknya, objek keadaan baharu mesti dibuat dengan perubahan yang dikehendaki.

Mengemas kini Objek Menggunakan Object.assign

Satu pendekatan untuk mengemas kini objek dalam tatasusunan ialah menggunakan kaedah Object.assign. Kaedah ini mengambil objek sedia ada sebagai argumen pertama dan argumen seterusnya sebagai pasangan nilai kunci yang harus digabungkan ke dalam objek asal. Objek yang terhasil ialah objek baharu dengan perubahan yang dikehendaki.

Dalam coretan kod yang disediakan, pendekatan ini dilaksanakan seperti berikut:

handleCommentEdit: function(id, text) {
    this.setState({
      data: this.state.data.map(el => (el.id === id ? Object.assign({}, el, { text }) : el))
    });
}

Mengemas kini Objek Menggunakan Spread

Dalam ES2018 dan kemudian, operator spread (...) boleh digunakan untuk mencapai hasil yang serupa dengan Object.assign. Operator spread menggabungkan sifat objek sedia ada dengan pasangan nilai kunci yang disediakan.

Coretan kod berikut menunjukkan cara menggunakan operator spread untuk mengemas kini objek ulasan:

this.setState({
  data: this.state.data.map(el => (el.id === id ? {...el, text} : el))
});

Kesimpulan

Teknik ini membolehkan anda mengemas kini objek individu dengan mudah dalam tatasusunan dalam ReactJS, sementara mematuhi prinsip kebolehubah rangka kerja.

Atas ialah kandungan terperinci Bagaimana untuk mengemas kini objek secara kekal dalam tatasusunan dalam keadaan bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!