React တွင် id ဖြင့် ထူးခြားသောသော့များ

အထက်ဖော်ပြပါ ကုဒ်တွင်၊ key အက်ထရီဘပ်ထဲသို့ ကျွန်ုပ်တို့သည် array အတွင်းရှိ အရာဝတ္ထု၏ အစဉ်လိုက် နံပါတ်ကို ထည့်သွင်းခဲ့သည်။ တကယ်တော့ ထိုကဲ့သို့သော အလေ့အကျင့်သည် မကောင်းသော အလေ့အကျင့်ဖြစ်ပြီး အလွန်အရေးကြီးသော အခြေအနေများတွင်သာ အသုံးပြုသင့်သည်။

အကြောင်းမှာ array ကို စီသောအခါ အရာဝတ္ထုများတွင် သော့အသစ်များရရှိသွားမည်ဖြစ်ပြီး React သည် array အတွင်းရှိ အရာဝတ္ထုများနှင့် ၎င်းတို့နှင့်သက်ဆိုင်သော tag များကြားရှိ ဆက်နွယ်မှုကို မှန်ကန်စွာ ခြေရာခံနိုင်မည် မဟုတ်ပါ။

ပိုမိုကောင်းမွန်သော အလေ့အကျင့်မှာ ထုတ်ကုန်တစ်ခုစီအတွက် ထူးခြားသော မှတ်ပုံတင်အမှတ် (identifier) ကို ထည့်သွင်းပေးခြင်းဖြစ်ပြီး ထိုအရာကို သော့အဖြစ် အသုံးပြုမည်ဖြစ်သည်။

ကျွန်ုပ်တို့၏ array အတွင်းရှိ ထုတ်ကုန်တစ်ခုစီအတွက် id property ကို ကျွန်ုပ်တို့၏ ထုတ်ကုန်နံပါတ်ဖြင့် ထည့်သွင်းကြပါစို့:

jsxconst prods = [
  {id: 1, name: 'product1', cost: 100},
  {id: 2, name: 'product2', cost: 200},
  {id: 3, name: 'product3', cost: 300},
];

ယခုအခါ သော့အဖြစ် ဤ id ကို အသုံးပြုပါမည်:

jsxfunction App() {
  const res = prods.map(function(item) {
    return <p key={item.id}>
      <span>{item.name}</span>:
      <span>{item.cost}</span>
    </p>;
  });
  
  return <div>
    {res}
  </div>;
}