Senarai dan Key

18 minitPemulaReact

Dalam pelajaran ini

Paparkan array data sebagai elemen dengan array.map()
Beri setiap item key yang unik dan stabil serta terangkan untuk apa React menggunakannya
Kenal pasti amaran key yang tiada dan bug yang berpunca daripada key={index}

Idea utama

Senarai dalam React hanyalah array yang di-map kepada elemen. key ialah tanda nama setiap item — ia membolehkan React membezakan item antara render, jadi guna sesuatu yang memang milik item itu, seperti id-nya.

Menu, mesej chat, hasil carian — kebanyakan UI memaparkan senarai data. Anda hampir tidak pernah menulis setiap <li> secara manual. Sebaliknya, anda simpan data dalam array dan guna map() untuk menukar setiap item menjadi elemen.

JSX

const drinks = [
  { id: "d1", name: "Teh Tarik" },
  { id: "d2", name: "Milo Ais" },
];

<ul>
  {drinks.map((drink) => (
    <li key={drink.id}>{drink.name}</li>
  ))}
</ul>

JSX boleh memaparkan array elemen secara terus, jadi drinks.map(…) di dalam {} terus berfungsi. Bahagian baharunya ialah key.

Kenapa React perlukan key?

Apabila senarai berubah (item ditambah, dibuang atau disusun semula), React membandingkan senarai baharu dengan yang lama. key memberitahu React item mana satu, supaya ia boleh kekalkan DOM dan state setiap item pada data yang betul — bukannya meneka berdasarkan kedudukan.

key: Prop khas pada elemen yang di-return daripada map(). Ia mesti unik antara adik-beradiknya (siblings) dan kekal sama untuk item yang sama merentasi render. Component anda tidak boleh membacanya sebagai prop.
Stable id: Pengenal yang memang milik data itu sendiri — id pangkalan data, kod produk, slug. Key yang terbaik.

Amaran yang anda akan lihat

Jika terlupa key, versi development React akan memaparkan: Warning: Each child in a list should have a unique "key" prop. Perhatikan console di bawah pratonton — ia sedang memberitahu anda tentang bug sebenar yang menunggu masa.

Index sebagai key: bug yang senyap

map((item, index) => <li key={index}>…) mendiamkan amaran itu, tetapi key kini bermaksud "kedudukan 0, kedudukan 1…". Buang item pertama dan setiap item beralih naik satu kedudukan — React sangka item terakhir yang dibuang lalu mengguna semula baris lain untuk data yang berbeza. Apa-apa yang disimpan di dalam baris itu (teks yang ditaip, status checkbox, state component) akan berada di sebelah item yang salah.

Rosak apabila senarai berubah

JSX

{dishes.map((dish, index) => (
  <li key={index}>{dish.name}</li>
))}

Stabil — mengikut data

JSX

{dishes.map((dish) => (
  <li key={dish.id}>{dish.name}</li>
))}

Guna id daripada data anda. Jika anda sendiri yang mencipta item, beri id semasa menciptanya.
Index boleh diterima hanya untuk senarai yang tidak pernah disusun semula, ditapis, atau ditambah/dibuang item di tengah-tengah.
Jangan sekali-kali guna Math.random() — key baharu setiap render menyebabkan React membuang dan membina semula setiap baris setiap kali.

Gantikan <li> tunggal yang ditulis terus itu dengan dishes.map(…) supaya keempat-empat hidangan dipaparkan. Kekalkan markup yang sama untuk setiap baris (li.dish dengan .name, .price dan input .qty), paparkan harga dengan dua tempat perpuluhan menggunakan dish.price.toFixed(2), dan beri setiap <li> key daripada data — console mesti tiada amaran key.

Semakan

Keempat-empat hidangan disenaraikan
Harga dipaparkan dengan dua tempat perpuluhan
Tiada amaran key dalam console

Uji kefahaman

Di mana key patut diletakkan?

Pada <ul> yang membalut senaraiPada elemen paling luar yang di-return daripada map()Pada elemen paling dalam di dalam setiap item

Apa masalah key={Math.random()}?

Tiada — key itu unikKey berubah setiap render, jadi React membina semula setiap item dan kehilangan state-nyaReact hanya menerima string sebagai key

Bilakah key={index} boleh diterima?

Sentiasa — React mengesyorkannyaUntuk senarai statik yang tidak pernah disusun semula, ditapis, atau ditambah/dibuang di tengah-tengahHanya apabila senarai ada lebih 100 item

Apa yang anda pelajari

array.map(item => <li key={item.id}>…</li>) menukar data menjadi UI.
Key membolehkan React memadankan item antara render; ia mesti unik antara siblings dan stabil.
Key yang tiada mencetuskan amaran console; key={index} menyembunyikan amaran tetapi mencampuradukkan state apabila senarai berubah.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.