Ключи должны быть уникальными внутри списка, но они не обязательно должны быть глобально уникальными во всём приложении. Одно и то же значение ключа можно спокойно использовать в разных массивах или компонентах.
Ключи должны быть уникальными только среди соседних элементов внутри одного родительского списка. Это позволяет React правильно определить, какие элементы изменились, были добавлены или удалены при ререндере.
Представь компонент Book, который выводит одни и те же данные в двух разных форматах:
function Book(props) {
const index = (
<ul>
{props.pages.map((page) => (
<li key={page.id}>{page.title}</li>
))}
</ul>
);
const content = props.pages.map((page) => (
<div key={page.id}>
<h3>{page.title}</h3>
<p>{page.content}</p>
<p>{page.pageNumber}</p>
</div>
));
return (
<div>
{index}
<hr />
{content}
</div>
);
}
В этом примере page.id используется как ключ и в списке index, и в списке content. Это совершенно нормально, потому что ключи уникальны внутри своих списков, хотя и имеют одинаковые значения.
Используй стабильные, уникальные идентификаторы из своих данных (например, ID из базы данных) вместо индексов массива. Это гарантирует сохранение идентичности компонента при ререндере и предотвращает баги, когда списки фильтруются, сортируются или переупорядочиваются.
Ключи должны быть уникальны только среди элементов-соседей в одном родительском списке, а не глобально по всему приложению.
Новый — ещё не проверен сообществом
Вы