Saya sedang membangun komponen Bereaksi yang menerima sumber data JSON dan membuat tabel yang bisa diurutkan.
Setiap baris data dinamis memiliki kunci unik yang ditetapkan untuknya tetapi saya masih mendapatkan kesalahan:

Setiap anak dalam array harus memiliki prop "kunci" yang unik.
Periksa metode render dari TableComponent.

TableComponentMetode render saya kembali:

<table>
  <thead key="thead">
    <TableHeader columns={columnNames}/>
  </thead>
  <tbody key="tbody">
    { rows }
  </tbody>
</table>

The TableHeaderkomponen satu baris dan juga memiliki kunci yang unik yang ditugaskan untuk itu.

Setiap rowin rowsdibangun dari komponen dengan kunci unik:

<TableRowItem key={item.id} data={item} columns={columnNames}/>

Dan TableRowItemtampilannya seperti ini:

var TableRowItem = React.createClass({
  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>
    )
  }
});

Apa yang menyebabkan kesalahan kunci prop unik?

Anda harus menambahkan kunci untuk setiap anak dan setiap elemen di dalam anak-anak .

Dengan cara ini Bereaksi dapat menangani perubahan DOM minimal.

Dalam kode Anda, masing-masing <TableRowItem key={item.id} data={item} columns={columnNames}/> - berusaha membuat beberapa anak di dalamnya tanpa kunci.

Lihat contoh ini .

Coba hapus key={i}dari<b></b> elemen di dalam div (dan periksa konsol).

Dalam sampel, jika kita tidak memberikan kunci untuk <b>elemen dan kami ingin memperbarui hanya satuobject.city , Bereaksi kebutuhan untuk re-render seluruh baris vs hanya elemen.

Ini kodenya:

var data = [{name:'Jhon', age:28, city:'HO'},
            {name:'Onhj', age:82, city:'HN'},
            {name:'Nohj', age:41, city:'IT'}
           ];

var Hello = React.createClass({

    render: function() {

      var _data = this.props.info;
      console.log(_data);
      return(
        <div>
            {_data.map(function(object, i){
               return <div className={"row"} key={i}> 
                          {[ object.name ,
                             // remove the key
                             <b className="fosfo" key={i}> {object.city} </b> , 
                             object.age
                          ]}
                      </div>; 
             })}
        </div>
       );
    }
});

React.render(<Hello info={data} />, document.body);

Jawaban yang diposting oleh @Chris di bagian bawah jauh lebih detail daripada jawaban ini. Silakan lihat di https://stackoverflow.com/a/43892905/2325522

Bereaksi dokumentasi tentang pentingnya kunci dalam rekonsiliasi: Kunci

Hati-hati saat mengulangi array !!

Ini adalah kesalahpahaman umum bahwa menggunakan indeks elemen dalam array adalah cara yang dapat diterima untuk menekan kesalahan yang mungkin Anda kenal:

Each child in an array should have a unique "key" prop.

Namun, dalam banyak kasus tidak! Ini adalah anti-pola yang dalam beberapa situasi dapat menyebabkan perilaku yang tidak diinginkan .

Memahami keyprop

Bereaksi menggunakan keyprop untuk memahami hubungan Elemen-ke-DOM elemen, yang kemudian digunakan untuk proses rekonsiliasi . Oleh karena itu sangat penting bahwa kunci selalu tetap unik , jika tidak ada kesempatan bagus Bereaksi akan mencampur unsur-unsur dan bermutasi yang salah. Penting juga bahwa tombol-tombol ini tetap statis di seluruh rendering ulang untuk mempertahankan kinerja terbaik.

Yang sedang berkata, seseorang tidak selalu perlu menerapkan di atas, asalkan diketahui bahwa array benar-benar statis. Namun, menerapkan praktik terbaik dianjurkan sedapat mungkin.

Pengembang Bereaksi mengatakan dalam masalah GitHub ini :

• kuncinya sebenarnya bukan tentang kinerja, ini lebih tentang identitas (yang pada gilirannya mengarah pada kinerja yang lebih baik). nilai yang ditugaskan secara acak dan berubah bukan identitas
• Kami tidak dapat secara realistis memberikan kunci [otomatis] tanpa mengetahui bagaimana data Anda dimodelkan. Saya akan menyarankan mungkin menggunakan semacam fungsi hashing jika Anda tidak memiliki id
• Kami sudah memiliki kunci internal ketika kami menggunakan array, tetapi mereka adalah indeks dalam array. Saat Anda memasukkan elemen baru, kunci-kunci itu salah.

Singkatnya, a key seharusnya:

• Unik - Kunci tidak dapat identik dengan a komponen saudara kandung .
• Statis - Kunci tidak boleh berubah antara render.

Menggunakan key prop

Sesuai dengan penjelasan di atas, pelajari sampel-sampel berikut dengan cermat dan cobalah untuk mengimplementasikan, bila mungkin, pendekatan yang direkomendasikan.

Buruk (Berpotensi)

<tbody>
    {rows.map((row, i) => {
        return <ObjectRow key={i} />;
    })}
</tbody>

Ini bisa dibilang kesalahan paling umum yang terlihat ketika iterasi di atas array di Bereaksi. Pendekatan ini secara teknis tidak "salah" , itu hanya ... "berbahaya" jika Anda tidak tahu apa yang Anda lakukan. Jika Anda melakukan iterasi melalui array statis maka ini adalah pendekatan yang benar-benar valid (mis. Array tautan dalam menu navigasi Anda). Namun, jika Anda menambahkan, menghapus, memesan kembali, atau memfilter item, maka Anda harus berhati-hati. Lihatlah penjelasan terperinci ini dalam dokumentasi resmi.

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      arr: ["Item 1"]
    }
  }
  
  click = () => {
    this.setState({
      arr: ['Item ' + (this.state.arr.length+1)].concat(this.state.arr),
    });
  }
  
  render() {
    return(
      <div>
        <button onClick={this.click}>Add</button>
        <ul>
          {this.state.arr.map(
            (item, i) => <Item key={i} text={"Item " + i}>{item + " "}</Item>
          )}
        </ul>
      </div>
    );
  }
}

const Item = (props) => {
  return (
    <li>
      <label>{props.children}</label>
      <input value={props.text} />
    </li>
  );
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Dalam cuplikan ini kami menggunakan array non-statis dan kami tidak membatasi diri untuk menggunakannya sebagai tumpukan. Ini adalah pendekatan yang tidak aman (Anda akan melihat alasannya). Perhatikan bagaimana saat kita menambahkan item ke awal array (pada dasarnya unshift), nilai untuk masing-masing <input>tetap di tempatnya. Mengapa? Karena keytidak mengidentifikasi setiap item secara unik.

Dengan kata lain, pada awalnya Item 1sudah key={0}. Ketika kami menambahkan item kedua, item teratas menjadi Item 2, diikuti oleh Item 1sebagai item kedua. Namun, sekarang Item 1sudah key={1}dan tidak key={0}lagi. Sebaliknya, Item 2sekarang sudah key={0}!!

Karena itu, React berpendapat bahwa <input>unsur - unsurnya tidak berubah, karena Itemkunci dengan 0selalu ada di atas!

Jadi mengapa pendekatan ini saja terkadang buruk?

Pendekatan ini hanya berisiko jika array entah bagaimana difilter, disusun ulang, atau item ditambahkan / dihapus. Jika selalu statis, maka sangat aman untuk digunakan. Misalnya, menu navigasi suka["Home", "Products", "Contact us"] dapat dengan aman diulangi dengan metode ini karena Anda mungkin tidak akan pernah menambahkan tautan baru atau mengatur ulang.

Singkatnya, inilah saatnya Anda dapat menggunakan indeks dengan aman sebagai key:

• Array bersifat statis dan tidak akan pernah berubah.
• Array tidak pernah difilter (menampilkan subset dari array).
• Array tidak pernah disusun ulang.
• Array digunakan sebagai tumpukan atau LIFO (last in, first out). Dengan kata lain, menambahkan hanya bisa dilakukan di akhir array (yaitu push), dan hanya item terakhir yang bisa dihapus (yaitu pop).

Seandainya kami, dalam cuplikan di atas, mendorong item yang ditambahkan ke akhir array, urutan untuk setiap item yang ada akan selalu benar.

Sangat buruk

<tbody>
    {rows.map((row) => {
        return <ObjectRow key={Math.random()} />;
    })}
</tbody>

Meskipun pendekatan ini mungkin akan menjamin keunikan kunci, itu akan selalu memaksa bereaksi untuk membuat kembali setiap item dalam daftar, bahkan ketika ini tidak diperlukan. Ini solusi yang sangat buruk karena sangat memengaruhi kinerja. Belum lagi bahwa seseorang tidak dapat mengecualikan kemungkinan tabrakan kunci dalam acara yang Math.random()menghasilkan angka yang sama dua kali.

Kunci yang tidak stabil (seperti yang diproduksi oleh Math.random()) akan menyebabkan banyak instance komponen dan node DOM tidak perlu diciptakan kembali, yang dapat menyebabkan penurunan kinerja dan kehilangan status komponen anak.

Baik sekali

<tbody>
    {rows.map((row) => {
        return <ObjectRow key={row.uniqueId} />;
    })}
</tbody>

Ini bisa dibilang pendekatan terbaik karena menggunakan properti yang unik untuk setiap item dalam dataset. Misalnya, jika rowsberisi data yang diambil dari basis data, seseorang dapat menggunakan Kunci Utama tabel ( yang biasanya merupakan nomor yang bertambah secara otomatis ).

Cara terbaik untuk memilih kunci adalah dengan menggunakan string yang secara unik mengidentifikasi item daftar di antara saudara kandungnya. Paling sering Anda akan menggunakan ID dari data Anda sebagai kunci

Baik

componentWillMount() {
  let rows = this.props.rows.map(item => { 
    return {uid: SomeLibrary.generateUniqueID(), value: item};
  });
}

...

<tbody>
    {rows.map((row) => {
        return <ObjectRow key={row.uid} />;
    })}
</tbody>

Ini juga merupakan pendekatan yang baik. Jika dataset Anda tidak berisi data apa pun yang menjamin keunikan ( misalnya, array nomor sewenang-wenang ), ada kemungkinan tabrakan kunci. Dalam kasus seperti itu, yang terbaik adalah secara manual menghasilkan pengidentifikasi unik untuk setiap item dalam dataset sebelum mengulanginya. Lebih disukai ketika memasang komponen atau ketika dataset diterima ( misalnya dari propsatau dari panggilan API async ), untuk melakukan ini hanya sekali , dan tidak setiap kali komponen dirender ulang. Sudah ada beberapa perpustakaan di luar sana yang dapat memberikan Anda kunci tersebut. Berikut ini salah satu contohnya: react-key-index .

Ini mungkin atau tidak membantu seseorang, tetapi itu mungkin referensi cepat. Ini juga mirip dengan semua jawaban yang disajikan di atas.

Saya memiliki banyak lokasi yang menghasilkan daftar menggunakan struktur di bawah ini:

return (
    {myList.map(item => (
       <>
          <div class="some class"> 
             {item.someProperty} 
              ....
          </div>
       </>
     )}
 )

Setelah sedikit trial and error (dan beberapa frustrasi), menambahkan properti kunci ke blok terluar menyelesaikannya. Perhatikan juga bahwa tag <> sekarang diganti dengan tag sekarang.

return (

    {myList.map((item, index) => (
       <div key={index}>
          <div class="some class"> 
             {item.someProperty} 
              ....
          </div>
       </div>
     )}
 )

Tentu saja, saya secara naif menggunakan indeks iterasi (indeks) untuk mengisi nilai kunci dalam contoh di atas. Idealnya, Anda akan menggunakan sesuatu yang unik untuk item daftar.

Peringatan: Setiap anak dalam array atau iterator harus memiliki prop "kunci" yang unik.

Ini adalah peringatan karena untuk item array yang akan kita ulas membutuhkan kemiripan yang unik.

Bereaksi menangani iterasi komponen rendering sebagai array.

Cara yang lebih baik untuk menyelesaikan ini adalah memberikan indeks pada item-item array yang akan Anda ulangi misalnya.

class UsersState extends Component
    {
        state = {
            users: [
                {name:"shashank", age:20},
                {name:"vardan", age:30},
                {name:"somya", age:40}
            ]
        }
    render()
        {
            return(
                    <div>
                        {
                            this.state.users.map((user, index)=>{
                                return <UserState key={index} age={user.age}>{user.name}</UserState>
                            })
                        }
                    </div>
                )
        }

indeks Bereaksi alat peraga bawaan.

Cukup tambahkan kunci unik ke Komponen Anda

data.map((marker)=>{
    return(
        <YourComponents 
            key={data.id}     // <----- unique key
        />
    );
})

Periksa: key = undef !!!

Anda juga mendapat pesan peringatan:

Each child in a list should have a unique "key" prop.

jika kode Anda selesai dengan benar, tetapi jika aktif

<ObjectRow key={someValue} />

someValue tidak terdefinisi !!! Silakan periksa ini dulu. Anda dapat menghemat waktu.

Solusi terbaik untuk mendefinisikan kunci unik dalam bereaksi: di dalam peta Anda menginisialisasi nama pos kemudian kunci didefinisikan dengan kunci = {post.id} atau dalam kode saya Anda lihat saya mendefinisikan item nama kemudian saya mendefinisikan kunci dengan kunci = {item.id }:

<div className="container">
                {posts.map(item =>(

                    <div className="card border-primary mb-3" key={item.id}>
                        <div className="card-header">{item.name}</div>
                    <div className="card-body" >
                <h4 className="card-title">{item.username}</h4>
                <p className="card-text">{item.email}</p>
                    </div>
                  </div>
                ))}
            </div>

Ini peringatan, Tetapi mengatasi ini akan membuat Reacts memberikan lebih cepat ,

Ini karena Reactperlu mengidentifikasi secara unik setiap item dalam daftar. Katakanlah jika keadaan elemen dari daftar itu berubah dalam Bereaksi Virtual DOMmaka Bereaksi perlu mencari tahu elemen mana yang berubah dan di mana dalam DOM itu perlu berubah sehingga browser DOM akan disinkronkan dengan Reacts Virtual DOM.

Sebagai solusi, cukup perkenalkan keyatribut untuk setiap litag. Ini keyharus menjadi nilai unik untuk setiap elemen.

var TableRowItem = React.createClass({
  render: function() {

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

    return (
      <tr>{ td(this.props.item) }</tr>
    )
  }
});

Ini akan menyelesaikan masalah.

Saya mengalami pesan kesalahan ini karena <></>dikembalikan untuk beberapa item dalam array ketika sebaliknya nullperlu dikembalikan.

Saya memperbaiki ini menggunakan Guid untuk setiap kunci seperti ini: Menghasilkan Guid:

guid() {
    return this.s4() + this.s4() + '-' + this.s4() + '-' + this.s4() + '-' +
        this.s4() + '-' + this.s4() + this.s4() + this.s4();
}

s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
}

Dan kemudian menetapkan nilai ini ke marker:

{this.state.markers.map(marker => (
              <MapView.Marker
                  key={this.guid()}
                  coordinate={marker.coordinates}
                  title={marker.title}
              />
          ))}

Pada dasarnya Anda tidak harus menggunakan indeks array sebagai kunci unik. Alih-alih, Anda dapat menggunakan a setTimeout(() => Date.now(),0)untuk mengatur kunci unik atau uniquid uuid atau cara lain yang akan menghasilkan id unik tetapi tidak indeks array sebagai id unik.