React හි ටැග් අරාවක අනන්ය යතුරු
පෙර උදාහරණයේ දී, අපි අපගේ පැරග්රෆ් චක්රයක් තුළ පහත පරිදි සාදන ලදී:
const res = arr.map(function(item) {
return <p>{item}</p>;
});
මෙය ක්රියාත්මක වනු ඇත, කෙසේ වෙතත්, කොන්සෝලය දෙස බැලුවහොත් අපට දෝෂයක් දකිනු ඇත: Warning: Each child in an array or iterator should have a unique "key" prop. මෙම අවස්ථාවේ දී React අපෙන් ඉල්ලා සිටින්නේ චක්රයෙන් ලැබෙන සෑම ටැගයකටම අප විසින් අනන්ය අංකයක් ලබා දිය යුතු බවයි, එවිට React වෙනුවෙන් මෙම ටැග් සමඟ වැඩිදුරටත් වැඩ කිරීම පහසු වේ.
මෙම අංකය එකතු කරනු ලබන්නේ ගුණාංගයක් භාවිතයෙන්
key. මෙම අවස්ථාවේ දී අංකයක් ලෙස
අපට ගත හැක්කේ අරාව තුළ ඇති මූලද්රව්යයේ අංකය.
අපගේ අවස්ථාවේ දී මෙම අංකය සංරක්ෂණය කර ඇත්තේ විචල්යය තුළ
index වන අතර එයින් අදහස් වන්නේ නිවැරදි කරන ලද පේළිය
පහත පරිදි පෙනෙනු ඇති බවයි:
const res = arr.map(function(item, index) {
return <p key={index}>{item}</p>;
});
අපි එය ධාවනය කරමු - කොන්සෝලයෙන් දෝෂය අතුරුදහන් වේ:
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>;
}
යළි වරක්: මෙම ගුණාංගය key යනු සේවාදායක
අගයක් වන අතර React සඳහා වේ, මෙම කරුණ ගැඹුරින් ඔබට තේරුම් ගත හැක්කේ
ඊළඟ පාඩම් වලදී. දැනට සරලව
දැනගන්න: ඔබට මෙවැනි දෝෂයක් දකින්නේ නම් - එක් එක්
ටැගය සඳහා අනන්ය අගයක් සහිතව ගුණාංගය key එක් කරන්න
එවිට ගැටළුව අතුරුදහන් වේ.
යතුර key අනන්ය විය යුත්තේ
මෙම චක්රය තුළ පමණි, වෙනත් චක්රයක
ඇති key අගයන් වෙනත් චක්රයක අගයන්
සමඟ සමපාත විය හැක.
පෙර කාර්යය සඳහා ඔබගේ විසඳුම විස්තර කර ඇති පරිදි වෙනස් කරන්න.
