Бірегей кілттер id арқылы React-те

Жоғарыда келтірілген кодта key атрибутына біз элементтің реттік нөмірін қосатынбыз. Шын мәнінде, мұндай тәжірибе нашар болып саналады және оны тек өте қажетті жағдайда ғана қолдану керек.

Мәселе мында, массивті сұрыптаған кезде элементтердің кілттері өзгереді және React массив элементтері мен сәйкес тегтер арасындағы байланысты дұрыс бақылай алмайды.

Жақсырақ тәжірибе әрбір өнімге бірегей сәйкестендіргіш қосып, оны кілт ретінде пайдалану болып табылады.

Келіңіздер, біздің массивімізде әрбір өнімге өзіміздің өнім нөмірі бар id қасиетін қосамыз:

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>;
}