keyExtractor 有问题 - 警告唯一的 ''key''

Question

我是 react native 的新手，刚开始学习。 我有一个 FlatList，其中包含来自这样一个数组的数据：

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