Bagaimanakah Saya Boleh Mengemas Kini Objek Dengan Cekap Dalam Array dalam ReactJS?

Mengemas kini Objek dalam Tatasusunan dalam ReactJS: Panduan Komprehensif

Dalam ReactJS, apabila berurusan dengan tatasusunan sebagai sebahagian daripada keadaan, mengemas kini objek dalam tatasusunan tersebut boleh menjadi tugas yang mencabar. Artikel ini akan memberikan anda penyelesaian yang optimum untuk isu ini.

Memandangkan contoh yang dibentangkan dalam tutorial:

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

Untuk mengemas kini objek dalam tatasusunan 'data', kami menggunakan kaedah 'peta' dalam pembolehubah Komen yang dikemas kini:

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

Pendekatan ini menggunakan 'Object.assign' untuk menggabungkan objek sedia ada dengan sifat yang dikemas kini, dengan itu memastikan tidak berubah. Sebagai alternatif, anda boleh memilih operator 'spread', yang serasi dengan ES2018:

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

Dengan mengikuti teknik ini, anda boleh mengemas kini objek dalam tatasusunan dengan mudah dalam aplikasi ReactJS anda.

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