Ключ определен, но он предупреждает: «Каждый дочерний элемент в списке должен иметь уникальный ключ» - PullRequest
Новая
       4

Ключ определен, но он предупреждает: «Каждый дочерний элемент в списке должен иметь уникальный ключ»

1 голос
/ 23 января 2020

, хотя я определил ключ для SearchDropDownItem, он показывает предупреждение

компонент DropDown 

filteredItems.length > 0 ? (
  filteredItems.map(item => {
    return (
      <SearchDropDownItem
        item={item}
        buttonTitle={{ buttonJoin: content.buttonJoin }}
        onItemSelect={onItemSelect}
      />
    );
  })
) : (
  <SearchDropDownItem emptyList={content.noCommunityFound} />
)

searchDropDownItem: 

const SearchDropDownItem = ({
  item = {   },
  onItemSelect,
  buttonTitle = "",
  emptyList
}) => {
  return (
    <DropdownItem key={item.id || 1}>
      {!emptyList ? (
        <Box>
          <Span>{item.name} </Span>
          <JoinButton
            item={item}
            index={item.id}
            onSuccess={onItemSelect}
            content={buttonTitle}
          />
        </Box>
      ) : (
        <Box>
          <Span>{item.emptyList}</Span>
        </Box>
      )}
    </DropdownItem>
  );
};

Предупреждение : У каждого ребенка в списке должна быть уникальная «ключевая» опора. Проверьте метод рендеринга SearchBox. в SearchDropDownItem (в SearchBox / index.jsx: 52)

1 Ответ

8 голосов
/ 23 января 2020

Вы должны поместить ключ там, где вы используете SearchDropdownItem, поэтому в l oop. 

filteredItems.length > 0 ? (
  filteredItems.map(item => {
    return (
      <SearchDropDownItem
        key={item.id} // <-- This is where it has to be
        item={item}
        buttonTitle={{ buttonJoin: content.buttonJoin }}
        onItemSelect={onItemSelect}
      />
    );
  })
) : (
  <SearchDropDownItem emptyList={content.noCommunityFound} />
)

Документы по ключам в React: https://reactjs.org/docs/lists-and-keys.html#keys

...