Bagaimanakah Saya Mengemas kini Objek dengan Cekap dalam Keadaan Array ReactJS?

Mengemas kini Objek dalam Tatasusunan ReactJS: Penerokaan Mendalam

Dalam ReactJS, tatasusunan dalam keadaan selalunya mengandungi objek. Mengemas kini objek ini boleh menjadi satu cabaran. Artikel ini menyelidiki kaedah yang berkesan untuk menyelesaikan tugas ini.

Memahami Masalah

Pertimbangkan contoh berikut:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

Fungsi handleCommentEdit bertanggungjawab untuk mengemas kini sifat teks objek ulasan dengan id tertentu. Walau bagaimanapun, persoalan timbul: bagaimanakah kita boleh membuat pelbagai ulasan yang dikemas kini?

Penyelesaian Teguh

Penyelesaian yang cekap melibatkan penggunaan Object.assign:

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

Coretan kod ini memetakan ulasan sedia ada, mengekalkan semua objek yang tidak berubah. Untuk objek dengan id yang sepadan, ia mencipta objek baharu dengan sifat teks yang dikemas kini sambil mengekalkan sifat asal.

Penambahan ES2018

Bagi mereka yang menggunakan JavaScript terkini ciri, ES2018 menyediakan penyelesaian yang lebih ringkas menggunakan spread:

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

Dengan spread, objek yang dikemas kini boleh dibuat dengan hanya menggantikan sifat teks sedia ada.

Kesimpulan

Mengemas kini objek dalam tatasusunan dalam ReactJS memerlukan pengendalian yang berhati-hati terhadap ketidakbolehubah objek. Dengan memanfaatkan Object.assign atau spread, pembangun boleh mengemas kini sifat objek dengan cekap sambil mengekalkan integriti tatasusunan asal. Kaedah ini menyediakan penyelesaian yang mantap dan ringkas kepada cabaran pengaturcaraan ReactJS biasa ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Mengemas kini Objek dengan Cekap dalam Keadaan Array ReactJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!