Каждый дочерний элемент в массиве или итераторе должен иметь уникальную ключевую опору
Привет, я получаю предупреждение «Каждый дочерний элемент в массиве или итераторе должен иметь уникальную «ключевую» опору», когда я сопоставляю массив объектов.
Что я пытаюсь сделать? У меня есть массив объектов с переменными именами элементов, и я перебираю каждый элемент, чтобы отобразить его имя. В настоящее время я получаю вышеупомянутое предупреждение. Это работает, однако я хочу избавиться от предупреждения.
Пример данных с именем "items" массив объектов.
items = [{
children: [{meshes:[10,11], name: 'item_1', index:1},
{meshes:[1,2], name: 'item_4', inde:4},],
index: 0,
default_name: items,}]
Ниже приведен код,
function Items(props) {
return (
<ul className = "items_list">
<div className = "itemss">
{props.items.map((item) => {
return (
<Item
item = {item}
/>
);
})}
</div>
</ul>
);
}
Что я пробовал? Я понимаю, что при отображении каждого элемента мы должны предоставить уникальное ключевое свойство. поэтому я добавил индекс к методу .map, как показано ниже, {props.items.map((элемент, индекс) => { возвращение ( ); })}
Но это не работает... при нажатии кнопки "Назад" он останется на той же странице.
Так может кто-нибудь помочь мне понять, где я ошибаюсь. Или дайте ответ на это. Спасибо.
Ответы 2
Вы получите это предупреждение, только если два или более элемента в списке снабжены одним и тем же ключом, попробуйте это изменение.
{props.items.map((item,index) => {
console.info(index);
return (
<Item
key = {index}
item = {item}
/>
);
})}
Anti pattern
Вы не должны использовать показатель из карта для вашего ключа, это антипаттерн, это может привести к непредсказуемым результатам.
Пожалуйста, проверьте это:https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
Вы должны использовать правильный уникальный идентификатор для своего ключа, например идентификатор БД или какой-либо уникальный идентификатор.
Этот Ключ используется внутри для идентификации DOM-элементы для рендеринга, а не для рендеринга снова.
Спасибо за ответ. правда, когда я регистрирую индекс, он начинается с 0. Однако он не позволяет вернуться на предыдущую страницу.
вам нужно удалить индекс из элементов и добавить его в свой итератор
function Items(props) {
return (
<ul className = "items_list">
<div className = "itemss">
{props.items.map((item, index) => (
<Item
key = {index}
item = {item}
/>
);
)}
</div>
</ul>
);
Уникальное свойство должно иметь имя «ключ», изменение «индекса» на «ключ» должно исправить это для вас.