在React Native App中得到警告“列表中的每个孩子都应该有一个唯一的关键道具”

const data = [
  { id: '1', name: 'Alice' },
  { id: '2', name: 'Bob' },
  { id: '3', name: 'Charlie' }
];

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

const MyComponent = () => {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id} // 使用id作为key
      renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
        </View>
      )}
    />
  );
};

export default MyComponent;

// 错误示例
<FlatList
  data={data}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>

<FlatList
  data={data}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <Text>{item.name}</Text>}
/>

// 错误示例
const dataWithDuplicateKeys = [
  { id: '1', name: 'Alice' },
  { id: '1', name: 'Bob' }, // id重复
];

<FlatList
  data={dataWithDuplicateKeys}
  keyExtractor={(item) => item.id} // 这里会有问题
/>

const dataWithUniqueKeys = [
  { id: '1', name: 'Alice' },
  { id: '2', name: 'Bob' },
];