Sobes.tech
Middle

Ce proprietate obligatorie trebuie să aibă fiecare element la redarea unei liste în React? De unde se pot lua cheile și de unde nu?

sobes.tech AI

Răspuns de la AI

При рендере списка в React каждому элементу нужно обязательно задать свойство key. Это помогает React эффективно обновлять и перерисовывать только изменённые элементы списка.

Откуда брать ключи:

  • Лучше всего использовать уникальные и стабильные идентификаторы из данных, например, id из базы.
  • Можно использовать уникальные строки или числа, которые не меняются между рендерами.

Чего избегать:

  • Не рекомендуется использовать индекс массива как ключ, особенно если порядок элементов может измениться, так как это может привести к неправильному обновлению компонентов.

Пример:

const items = [{id: 'a1', name: 'Item 1'}, {id: 'b2', name: 'Item 2'}];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);