Путаница в ключах Reactjs

#reactjs

Вопрос:

Я создаю приложение Reactjs, в котором я рендерю что-то подобное в одном из компонентов. Я немного смущен, куда я должен поместить уникальный ключ. Я постоянно получаю предупреждения об этом, не знаю почему, потому что мне кажется, что я разместил ключи в правильном месте.

 <Accordion allowZeroExpanded={true}>
  {sideDrawerList.map(item => (
    <AccordionItem key={item.key}>
      <AccordionItemHeading>
        <AccordionItemButton>
          <div>
            <p>{item.title}</p>
            <img src="some_url" alt="logo" />
          </div>
        </AccordionItemButton>
      </AccordionItemHeading>
      <AccordionItemPanel>
        <div>
          {item.childs.map(navItem => (
            <p key={navItem.linkPath}>
              <Link to={navItem.linkPath}>{navItem.linkText}</Link>
            </p>
          ))}
        </div>
      </AccordionItemPanel>
    </AccordionItem>
  ))}
</Accordion>

1. Какое предупреждение вы получаете? Ключи должны быть уникальными для каждого элемента в массиве, так что это может быть вашей проблемой.

2. Each child in a list should have a unique "key" prop. Это предупреждение, которое я получаю, и я удостоверяюсь, что все ключи уникальны.

3. проверьте свои значения ключей. Может быть, они одинаковые

4. Я проверил, все они разные.

5. Я бы удалял компоненты один за другим, пока ошибка не исчезнет. таким образом, вы можете найти проблемное место

Ответ №1:

Ваше размещение ключа идеально, как предполагают официальные документы React, ключ должен быть добавлен к первому элементу внутри карты.

Похоже, ваша проблема заключается в том, что ключи, которые вы используете, а именно: item.key или navItem.linkPath , похоже, имеют повторяющиеся значения. Это причина предупреждения, которое вы получаете, поскольку внутри списка все ключи должны быть уникальными. В cae у вас нет ничего уникального в вашем наборе данных, тогда вы можете рассмотреть возможность добавления индекса из map в качестве ключа, но индекс обычно не рекомендуется. Пример:

 list.map((currElement, index) => {
    <element key={index} />
});

Вот почему использование индекса в качестве ключа не рекомендуется, в отличие от документов react:

Если у вас нет стабильных идентификаторов для отображаемых элементов, вы можете использовать индекс элемента в качестве ключа в качестве последнего средства:

Мы не рекомендуем использовать индексы для ключей, если порядок элементов может измениться. Это может негативно повлиять на производительность и вызвать проблемы с состоянием компонента. Ознакомьтесь со статьей Робина Покорны для подробного объяснения негативных последствий использования индекса в качестве ключа. Если вы решите не назначать явный ключ элементам списка, то React по умолчанию будет использовать индексы в качестве ключей.