React Native FlatList keyExtractor返回重复项及VirtualizedList报错求助

嘿，我来帮你捋清楚这个问题！首先得明确，这个错误提示的核心不是你猜测的“data重复项”，而是你的父FlatList的每个单元格（也就是renderItem渲染的组件）里面，有多个和父列表同方向的VirtualizedList（比如FlatList或者SectionList），而且这些子列表没加唯一的listKey属性。

先看你给出的信息：你说data数组没有重复项，但控制台输出了两次coincheck-9，这其实是个线索——大概率是你的renderItem方法里的子组件出了问题，比如每个item里渲染了多个同方向的FlatList，而且这些子列表没设置唯一标识。

下面是具体的解决步骤：

1. 重点检查renderItem里的嵌套列表 #

打开你的this.renderItem方法，看看是不是在每个item里嵌套了多个FlatList/SectionList。如果是的话，给每个子列表加上唯一的listKey，比如：

// 举个例子，假设你的renderItem里有两个子FlatList
renderItem = ({ item }) => {
  return (
    <View>
      <FlatList
        listKey={`sub-list-1-${item}`} // 用父item的值保证唯一性
        data={yourSubData1}
        renderItem={/* 你的子列表渲染逻辑 */}
      />
      <FlatList
        listKey={`sub-list-2-${item}`} // 每个子list的key都要不一样
        data={yourSubData2}
        renderItem={/* 你的子列表渲染逻辑 */}
      />
    </View>
  );
}

listKey必须是每个子列表独有的，结合父item的内容或者index就能轻松做到。

2. 顺便修复keyExtractor的小问题 #

虽然这不是错误的根源，但控制台出现重复的key输出也得排查下：

• 你可以简化keyExtractor，因为你的data是唯一的字符串数组，直接用item本身当key就行：

keyExtractor={(item) => item}

这样比${item}-${index}更稳妥，避免index计算异常导致的重复key。

• 另外也检查下getItemLayout方法，有没有逻辑错误导致FlatList重复渲染某个item。

3. 排查第三方组件的嵌套列表 #

如果你的renderItem里没自己写嵌套列表，那可能是用的第三方UI组件内部嵌套了FlatList。这种情况下，找到这些组件，给它们加上listKey属性就行。

总的来说，这个错误本质是同方向嵌套的VirtualizedList缺少唯一标识，和父列表的data重复关系不大，重点放在子组件里的列表组件上就对啦！

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