反应本机平面列表：当存在一个空对象和另一个具有 id 属性的对象时，“遇到两个具有相同键的子对象...”

Question

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

，我会收到警告，

遇到两个小孩用同一把钥匙，

1

... ...即使没有重复。

如果我注释掉该数据并切换到只有 1 个条目的列表的数据，警告就会消失，但先前数据中索引 1 处的项目仍然存在，甚至保留先前的 renderItem 逻辑（如视频中所示）。

如果我重复执行此操作，我会不断收到累积在 FlatList 顶部的“幽灵”条目。

使用如图所示的 keyExtractor 可以防止这种情况，并且使用注释打开和关闭它会产生与前面描述的相同的重复行为。

这到底是怎么回事？这是有意的行为吗？故障？我应该举报吗？

Answer 1

这是预期的行为。在 Flatlist 中，您应该提供一个 keyExtractor 来为列表中的每个项目提供唯一的键。这就是反应原生识别项目的方式。您应该始终将 keyExtractor 属性赋予 Flatlist。

此外，如果您要在 ScrollView 或任何其他视图内映射列表，您应该为该映射内的每个项目提供 key 属性。这是一个例子。

  const data = [{id: 999}, {}, {id: 1}];

  return (
    <ScrollView contentContainerStyle={{padding: 20, paddingTop: 50}}>
      {data.map((item, index) => (
        <Text key={index}>{`placeholder ${index}\n`}</Text>
      ))}
    </ScrollView>
  );