键已定义，但它警告“列表中的每个孩子都应该有一个唯一的键道具”

Question

虽然我为 SearchDropDownItem 定义了一个键，但它显示了一个警告

组件下拉

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>
  );
};

警告：列表中的每个孩子都应该有一个唯一的“key”道具。检查 的渲染方法SearchBox。在 SearchDropDownItem 中（在 SearchBox/index.jsx:52）

Answer 1

您应该将密钥放在使用SearchDropdownItem, 所以在循环中。

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