React တွင် အမျိုးအစားများ၏ Array အတွင်း ထူးခြားသော Keys များ

ယခင်ဥပမာတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ အပိုဒ်များကို အောက်ပါအတိုင်း ကွင်းဆက်ဖြင့် ဖွဲ့စည်းခဲ့သည်။

const res = arr.map(function(item) {
	return <p>{item}</p>;
});

ဤအရာသည် အလုပ်လုပ်မည်ဖြစ်သော်လည်း၊ Console ကို ကြည့်ပါက ကျွန်ုပ်တို့သည် အမှားတစ်ခုကို တွေ့ရမည်။ Warning: Each child in an array or iterator should have a unique "key" prop။ ဤကိစ္စတွင် React သည် ကွင်းဆက်မှ ထွက်လာသော အမျိုးအစားတိုင်းအတွက် ကျွန်ုပ်တို့အား ထူးခြားသောနံပါတ်တစ်ခု ပေးရန် တောင်းဆိုထားသည်။ ထိုသို့ဆိုလျှင် React အတွက် နောက်ပိုင်းတွင် ထိုအမျိုးအစားများနှင့် အလုပ်လုပ်ရန် ပိုမိုလွယ်ကူစေမည်။

ဤနံပါတ်ကို key attribute ကို အသုံးပြု၍ ပေါင်းထည့်ပါသည်။ ဤကိစ္စတွင် နံပါတ်အဖြစ် ကျွန်ုပ်တို့သည် Array အတွင်းရှိ element ၏ index ကို ယူနိုင်သည်။ ကျွန်ုပ်တို့၏ ကိစ္စတွင် ဤနံပါတ်သည် index variable ထဲတွင် သိမ်းဆည်းထားပြီး ဆိုလိုသည်မှာ ပြင်ဆင်ထားသော စာကြောင်းသည် အောက်ပါအတိုင်း ဖြစ်လာမည်။

const res = arr.map(function(item, index) {
	return <p key={index}>{item}</p>;
});

စမ်းကြည့်ကြပါစို့ - Console မှ အမှားသည် ပျောက်ကွယ်သွားမည်။

function App() {
	const arr = [1, 2, 3, 4, 5];
	
	const res = arr.map(function(item, index) {
		return <p key={index}>{item}</p>;
	});
	
	return <div>
		{res}
	</div>;
}

နောက်တစ်ကြိမ်။ ဤ attribute key သည် React အတွက် အထောက်အကူပြု အဓိပ္ပာယ်ရှိသည်၊ နက်ရှိုင်းစွာ နားလည်ရန် သင်သည် ဤအချက်ကို နောက်သင်ခန်းစာများတွင် သိရှိပါလိမ့်မည်။ ယခုအချိန်တွင် ရိုးရိုးသာသာ သိထားပါ။ အကယ်၍ သင်သည် ထိုကဲ့သို့သော အမှားတစ်ခုကို တွေ့ပါက - key attribute ကို အမျိုးအစားတစ်ခုစီအတွက် ထူးခြားသော တန်ဖိုးဖြင့် ပေါင်းထည့်ပါက ပြဿနာ ပျောက်ကွယ်သွားမည်။

key သည် ထူးခြားရမည် ဤကွင်းဆက် အတွင်းတွင်သာ၊ အခြားကွင်းဆက်တစ်ခုတွင် key ၏ တန်ဖိုးများသည် အခြားကွင်းဆက်မှ တန်ဖိုးများနှင့် ကိုက်ညီနိုင်သည်။

သင်၏ ယခင်တာဝန် အဖြေကို ဖော်ပြထားသည့်အတိုင်း ပြုပြင်မွမ်းမံပါ။