Что я должен использовать в качестве ключа для элементов «строки» в реакции?
У меня есть галерея, в которой отображается количество книг в строке. Эта галерея использует массив книг в качестве реквизита и использует реквизит "itemsPerRow" для разделения книг на 2-мерный массив, а затем перебирает все книги, чтобы отобразить книги в виде сетки.
export default function Gallery({ items, itemsPerRow, renderLink }) {
itemsPerRow = itemsPerRow ?? 3
const rows = chunk(items, itemsPerRow)
const renderEmptyItems = (itemsToRender) => {
const items = []
for(let n = itemsToRender; n > 0; n--) {
items.push(<GalleryItem key = {`empty_${n}`} empty/>)
}
return items
}
return (
<div>
{
rows.map((row, index) => (
<div key = {index} className = "tile is-ancestor">
{row.map(item => <GalleryItem key = {item.id} renderLink = {renderLink} {...item}/>)}
{/* Add empty gallery items to make rows even */}
{index + 1 === rows.length && renderEmptyItems(itemsPerRow - row.length)}
</div>
))
}
</div>
)
}
Однако, если я не дам каждому div, представляющему строку, ключ, реакция жалуется на отсутствие ключей. Насколько я понимаю, использование индекса в качестве ключа на самом деле не помогает реагировать, и его следует избегать. Итак, что я должен использовать в качестве ключа здесь <div key = {index} className = "tile is-ancestor"> вместо индекса?
Спасибо за предложение. Мне определенно нужно посмотреть больше вступительных сеток.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Используйте уникальный идентификатор (book.id, возможно, book.title, если он уникален) для реквизита key. Если ваши данные не имеют уникального идентификатора, можно использовать index.
Я понимаю. Я почти боялся, что что-то может сломаться, если все не имеет уникальных ключей. Я уже использую book.id в качестве ключа для столбцов, просто мне нечем было идентифицировать произвольные структуры данных строк.
Вам необходимо указать значение, которое однозначно идентифицирует элемент, например идентификатор. Вы можете прочитать больше о ключах в документации.
Также не рекомендуется использовать индексы в качестве ключей, если порядок ваших данных может измениться, поскольку React полагается на ключи, чтобы знать, какие компоненты повторно отображать, документация, на которую я ссылаюсь, объясняет это далее.
Эй, просто небольшое примечание - я видел, как кто-то проголосовал за ваш ответ, который я прокомментировал. (Теперь вы его удалили.) Просто хотел сказать, что это был не я. Я считаю, что вместо этого более конструктивно комментировать и отрицать ответ только в том случае, если что-то, что кажется неправильным, не исправлено (или я узнаю, что оно не сломано). Удачного кодирования! И спасибо за помощь людям здесь.
Спасибо за ответ. Я нашел эту статью robinpokorny.medium.com/…, связанную в документации, полезной для понимания того, когда ключи могут вызывать проблемы.
Вы можете использовать уникальный_идентификатор, который различает каждый из документов (возможно, вам следует передать документ _id в качестве ключевой опоры в компонентах строки)
<div className = "row">
{notes.map((item) => {
return (
<div key = {note._id} className = "col-md-6">
<Component item = {item} />
</div>
);
})}
</div>
У вас уже есть действительно хороший ответ ниже, поэтому я просто добавлю, что вы также можете рассмотреть возможность использования css сетка, чтобы получить тот же эффект, который вы ищете, без добавления вычислительных затрат на разбивку элементов на 2d-массив вручную.