React Native FlatList出现重复Key警告与幽灵条目异常求助

代码示例 #

import React from "react";
import { FlatList, Text } from "react-native";

export default function ChatsList() {
  return (
    <FlatList
      contentContainerStyle={{ padding: 20, paddingTop: 50 }}
      // data={[0]}
      data={[{ id: 999 }, {}, { id: 1 }]}
      renderItem={({ index }) => (
        // <Text key={index}>{`bamboozled ${index}\n`}</Text>
        <Text key={index}>{`placeholder ${index}\n`}</Text>
      )}
      keyExtractor={(_item, index) => index.toString()}
    />
  );
}

问题描述 #

• 当前使用包含3个对象的数组作为数据源，其中索引1的对象为空。当数组中存在id=1的对象时，触发警告：Encountered two children with the same key, 1...，但实际不存在重复key。
• 切换数据源为data=[0]后，警告消失，但之前数据源中索引1的条目会残留，甚至沿用旧的renderItem逻辑。
• 重复切换数据源时，FlatList顶部会不断积累“幽灵”条目。
• 启用代码中的keyExtractor可避免问题，注释掉该属性后，异常行为再次出现。

结论与分析 #

这是React Native FlatList的漏洞，建议上报官方。

原因拆解

1. 未指定keyExtractor时，FlatList默认会优先取item的key或id作为唯一标识。你的数据源中，索引1的空对象无id/key属性，FlatList内部处理空对象时出现逻辑异常，误将其key判定为1，和索引2的id=1的item冲突，触发重复key警告。
2. 切换数据源后残留旧条目、积累“幽灵”条目，是因为key生成异常导致FlatList的组件复用机制失效，无法正确识别需要销毁的旧item，从而出现组件残留问题。
3. 显式指定keyExtractor用索引生成唯一key后，FlatList能准确追踪每个item的状态，因此不会出现异常。

临时解决方案

始终显式指定keyExtractor，优先使用item的业务唯一标识（如id）生成key，索引仅作为兜底方案。

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