密钥提取程序有问题 - 警告唯一密钥

Question

我是react native的新手，刚刚开始学习。我有一个平面列表，其中包含来自如下数组的数据：

const friends = [
{ name: 'Friend #1', age: '26', },
{ name: 'Friend #2', age: '31' },
{ name: 'Friend #3', age: '34' },
];

在返回FlatList的方法中，我添加了keyExtractor:

return (
<FlatList
keyExtractor={friend => friend.name}
data={friends}
renderItem={({ item }) => {
return ([
<Text style={styles.itemView}>{item.name} - Age {item.age}</Text>
]
);
}} />
);

仍有警告：

Warning: Each child in a list should have a unique "key" prop.%s%s 

Answer 1

您的问题是在数组中嵌套了Text元素

这样改：

<FlatList
keyExtractor={friend => friend.name}
data={friends}
renderItem={({ item }) => {
return (
<Text style={styles.itemView}>{item.name} - Age {item.age}</Text>
);
}} 
/>

Codesandbox