Bagaimana untuk Mengemas kini Objek dengan Elegan dalam Array dalam ReactJS?

Kemas Kini Objek Elegan dalam Tatasusunan untuk ReactJS

Dalam ReactJS, mengurus tatasusunan objek dalam keadaan aplikasi anda boleh menjadi senario biasa. Satu tugas sedemikian ialah mengemas kini objek tertentu dalam tatasusunan, yang boleh menimbulkan cabaran tanpa pemahaman yang jelas tentang teknik yang tersedia.

Contoh Senario

Pertimbangkan React berikut contoh komponen:

var CommentBox = React.createClass({
  getInitialState: function() {
    return {
      data: [
        { id: 1, author: "john", text: "foo" },
        { id: 2, author: "bob", text: "bar" },
      ],
    };
  },
  handleCommentEdit: function(id, text) {
    // Handle updating of the object inside the array
  },
});

Objektifnya adalah untuk mengemas kini objek dalam this.state.data apabila kaedah handleCommentEdit adalah dipanggil, secara khusus mengubah suai sifat teks.

Pendekatan Object.assign()

Kaedah yang biasa digemari ialah menggunakan Object.assign(). Ia menawarkan cara ringkas untuk mengemas kini objek sedia ada tanpa membuat objek baharu.

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

Di sini, kami mengulangi setiap elemen dalam this.state.data. Jika id elemen sepadan dengan id yang disediakan, kami mencipta objek baharu dengan menggabungkan el asal dengan teks yang dikemas kini menggunakan Object.assign(). Jika tidak, kami mengembalikan elemen asal.

Pendekatan Operator Spread

Untuk pendekatan yang lebih moden, anda boleh menggunakan operator spread ES2018:

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

Serupa dengan kaedah Object.assign(), kami menggunakan operator spread untuk mencipta objek baharu, menggabungkan objek asal dengan sifat teks yang dikemas kini.

Kedua-dua pendekatan Object.assign() dan operator spread menyediakan cara yang cekap dan elegan untuk mengemas kini objek dalam tatasusunan sambil mengekalkan kebolehubahan dalam aplikasi ReactJS.

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