React列表子项需唯一key属性报错，多种尝试仍无法解决求助

核心问题 #

你代码里的menuItem.map循环中，当category.id != item.item_data.category_id时，返回的是空Fragment <></>，这个元素没有加key——这就是报错的根源，map遍历的每一个子元素（包括空元素）都必须有唯一key。

另外你用Math.random()生成key的做法不推荐，每次渲染都会生成新值，会导致组件反复卸载重挂载，影响性能，而且不能保证绝对唯一。

修复步骤 #

1. 给menuItem.map的else分支空Fragment添加唯一key，直接用item.id即可，它本身就是唯一标识。
2. 把用Math.random()的那个Fragment的key换成稳定值，比如item.id + "-image-log"这类和item绑定的唯一标识。
3. 外层包裹category的Fragment，建议用category.id代替index做key，避免列表增删时index变化引发的组件异常。

修改后的代码示例 #

{menuCategory.map((category) => (
  <React.Fragment key={category.id}>
    {index != 0 ? (
      <ListItem
        key={category.id}
        topDivider
        titleStyle={themestyles.CardText}
        containerStyle={themestyles.ListItemDivider}>
        {console.log(category.category_data.name + category.id)}
        <ListItem.Content containerStyle={themestyles.ListItemContent}>
          <ListItem.Title style={themestyles.ItemTitle}>
            {category.category_data.name}
          </ListItem.Title>
        </ListItem.Content>
      </ListItem>
    ) : (
      <ListItem
        key={category.id}
        topDivider
        titleStyle={themestyles.CardText}
        containerStyle={themestyles.ListItemDividerTop}>
        {console.log(category.category_data.name + category.id)}
        <ListItem.Content containerStyle={themestyles.ListItemContent}>
          <ListItem.Title style={themestyles.ItemTitle}>
            {category.category_data.name}
          </ListItem.Title>
        </ListItem.Content>
      </ListItem>
    )}
    {menuItem.map((item) =>
      category.id == item.item_data.category_id ? (
        <Card
          key={item.id}
          titleStyle={themestyles.Card}
          containerStyle={themestyles.Card}
          featuredSubtitle={item.item_data.description}
          title={item.item_data.name}>
          {console.log(item.item_data.name + ' ' + item.id)}
          <React.Fragment key={`${item.id}-image-log`}>
            {console.log(
              'Image:: ' + menuImage[item.item_data.image_ids],
            )}
          </React.Fragment>
          <Card.Title>{item.item_data.name}</Card.Title>
          {menuImage[item.item_data.image_ids] != undefined ? (
            <Card.Image
              resizeMode="contain"
              source={{
                uri: `${menuImage[item.item_data.image_ids]}`,
              }}
            />
          ) : (
            <Card.Image
              resizeMode="contain"
              source={require('../../creative/icon.png')}
            />
          )}
        </Card>
      ) : (
        <React.Fragment key={item.id}></React.Fragment>
      ),
    )}
  </React.Fragment>
))}

内容的提问来源于stack exchange，提问作者DaleZA