Javascript 键已定义，但它会发出警告；列表中的每个子项都应该有一个唯一的关键道具"；

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

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

组件下拉列表

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

filteredItems.length>0？(
filteredItems.map（项=>{
返回(
);
})
) : (
)

searchDropDownItem组件：

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

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

const SearchDropDownItem=({
项目={}，
我选择，
钮扣=”，
空想家
}) => {
返回(
{！空列表(
{item.name}
) : (
{item.emptyList}
)}
);
};

警告：列表中的每个孩子都应该有一个唯一的“键”道具。检查

SearchBox

的渲染方法。

---

在SearchDropDownItem（位于SearchBox/index.jsx:52）

中，您应该将键放在使用

SearchDropDownItem的地方，因此在循环中

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

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

filteredItems.length>0？(
filteredItems.map（项=>{
返回(
我收到了同样的警告信息：
警告：列表中的每个孩子都应该有一个唯一的“key”道具。

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

然而，我的问题和解决方案与公认的答案有点不同。我认为在这个问题上添加我的解决方案可能会对某人有所帮助

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

我正在使用一个第三方组件，它有一个唯一的密钥。但是，当我使用一个循环来动态生成该组件的多个实例时，我收到了上面的警告消息

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

在I向组件添加按键道具后，警告消失。此按键不是组件道具的一部分

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

let filterJSX=[]；
设i=0；
对于（让Object.entries的[key1，value1]（state.filterListNew））{
i++；
filterJSX.push(
);
} 
键需要在下拉列表中，地图就在这里。