React හි ටැග් අරාවක අනන්‍ය යතුරු

පෙර උදාහරණයේ දී, අපි අපගේ පැරග්‍රෆ් චක්‍රයක් තුළ පහත පරිදි සාදන ලදී:

jsxconst 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 වන අතර එයින් අදහස් වන්නේ නිවැරදි කරන ලද පේළිය පහත පරිදි පෙනෙනු ඇති බවයි:

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

අපි එය ධාවනය කරමු - කොන්සෝලයෙන් දෝෂය අතුරුදහන් වේ:

jsxfunction 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 එක් කරන්න එවිට ගැටළුව අතුරුදහන් වේ.