Bagaimana untuk Menyelesaikan Ralat Utama Unik dalam Tatasusunan Reaksi Bersarang?

Memahami Kunci Unik untuk Array Children dalam React.js

Isu:

A React komponen yang bertanggungjawab untuk membuat jadual boleh diisih menggunakan tatasusunan bersarang menghadapi ralat yang menunjukkan kekurangan kunci unik untuk anak tatasusunan.

Analisis:

Untuk menyelesaikan isu ini, pastikan setiap anak serta-merta dalam tatasusunan, serta setiap elemen yang terkandung dalam kanak-kanak tersebut, mempunyai ciri unik prop kunci. Ini membolehkan React mengemas kini hanya bahagian DOM yang diperlukan dengan cekap semasa pemaparan.

Penyelesaian:

Dalam kod yang disediakan, komponen TableRowItem sedang cuba untuk memaparkan elemen anak tanpa menyatakan kunci. Untuk membetulkannya, tetapkan kunci unik kepada setiap elemen td kanak-kanak dalam TableRowItem seperti berikut:

{
  render: function() {
    var td = function() {
      return this.props.columns.map(function(c) {
        return <td key={this.props.data[c]}>{this.props.data[c]}</td>;
      }, this);
    }.bind(this);
    return (
      <tr>{td(this.props.item)}</tr>
    );
  }
}

Contoh:

Pertimbangkan contoh berikut yang disesuaikan daripada respons @Chris, yang menunjukkan kepentingan kunci dalam bersarang elemen:

const ExampleComponent = React.createClass({
  render: function () {
    const infoData = this.props.info;
    return (
      <div>
        {infoData.map((object, i) => {
          return (
            <div className={"row"} key={i}>
              {[
                object.name,
                // Assign unique key to <b> element
                <b className="fosfo" key={i}>
                  { " " }
                  {object.city}{ " " }
                </b>,
                object.age,
              ]}
            </div>
          );
        })}
      </div>
    );
  },
});

Nota Tambahan:

Adalah penting untuk sentiasa memberikan kunci unik kepada kanak-kanak segera dalam struktur tatasusunan. Ini membolehkan React mengemas kini secara optimum elemen DOM yang diperlukan sahaja, menghasilkan prestasi yang lebih baik dan kecekapan pemaparan.

Rujukan:

• [Dokumentasi React: Keys]( https://reactjs.org/docs/lists-and-keys.html)

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ralat Utama Unik dalam Tatasusunan Reaksi Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!