React Native FlatList子项唯一key警告问题解决（条件渲染场景）

我在FlatList中渲染两个自定义组件时，一直收到如下警告：

Warning: Each child in a list should have a unique "key" prop

我的keyExtractor配置正常，移除它反而会触发VirtualizedList相关警告。相关代码如下：

<FlatList
  keyExtractor={(item) => item.id.toString()}
  ListHeaderComponent={<View style={{ height: 36 }} />}
  ListFooterComponent={<View style={{ height: 90 }} />}
  data={data}
  renderItem={({ item }) => (
    <View>
      <ShortCard
        id={(item) => item.id}
        firstName={item.firstName.en}
        lastName={item.lastName.en}
        memberSince={item.created}
        customerReviewCount={item.customerReviewCount}
        customerReviewRate={item.customerReviewRate}
        dailyRate={
          item.services.find(
            ({ subcat_id }) => subcat_id === route.params.payload.id
          ).dailyRate.iqd
        }
        image={item.image}
        onPress={() => setStatex(focused === item.id ? 0 : item.id)}
        focused={focused}
        style={{ display: focused !== item.id ? "flex" : "none" }}
      />
      <LongCard
        onPressClose={() => setStatex(0)}
        style={{ display: focused === item.id ? "flex" : "none" }}
      />
    </View>
  )}
/>

解决方案 #

我曾尝试直接给组件添加key属性，但并未解决问题。进一步排查后发现，问题根源在自定义组件内部使用&&进行条件渲染的代码段。将这部分条件渲染逻辑提取到函数体内的变量中后，警告彻底消失。虽然不确定这是否是最优方案，但确实解决了当前的警告问题。

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