React Native FlatList出现重复空键报错，求技术解决方案

问题根源 #

你的imageReferences数组存在多个空字符串("")，而keyExtractor直接返回item，这会让这些空项生成重复的空键，触发警告。另外，即便renderItem过滤了空项，FlatList内部仍会为数组里的每一项生成键，哪怕你不渲染它。

修复步骤 #

1. 先过滤数据源的空项 #

传给FlatList之前，把无效的空字符串过滤掉，从根源避免空键：

const filteredImages = imageReferences.filter(item => item !== "");

<FlatList       
  data={filteredImages}       
  keyExtractor={(item, index) => item || `fallback-key-${index}`} // 双重保险，防止漏网空项
  renderItem={({ item, index }) => renderItem({ item, index })}       
  horizontal={true}       
  showsHorizontalScrollIndicator={false}     
/>

2. 移除renderItem里的多余key #

FlatList的keyExtractor已经为每个列表项的根组件提供了唯一键，你给View和Image手动加的key完全多余，直接删除：

const renderItem = ({ item, index }) => {         
  return (           
    <View style={styles.item}>              
      <Image source={{ uri: item }} style={styles.image} />           
    </View>         
  );     
};

3. 避免有效项的键冲突（可选） #

如果你的数据源里可能有重复的URL，建议用item+index组合生成键，彻底杜绝重复：

keyExtractor={(item, index) => `${item}-${index}`}

原写法失效原因 #

• FlatList会遍历data数组的每一项，不管renderItem是否返回组件，都会调用keyExtractor生成键，多个空字符串必然生成重复空键。
• 列表项的根组件不需要手动设置key，FlatList会通过keyExtractor自动绑定唯一标识，手动添加反而容易造成混淆。

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