基本扁平代码引发警告 - 反应原生

FlatList似乎没有工作。我得到这个警告。基本扁平代码引发警告 - 反应原生

VirtualizedList：项目丢失键，请务必在每个项目上指定关键属性或提供自定义keyExtractor。

代码：

<FlatList 
    data={[{name: 'a'}, {name: 'b'}]} 
    renderItem={ 
    (item) => <Text key={Math.random().toString()}>{item.name}</Text> 
    } 
    key={Math.random().toString()} />

来源

2017-06-14 Edison D' souza

不好使用随机密钥，因为密钥应该是唯一的。 – Li357

102

只要做到这一点：

<FlatList 
    data={[{name: 'a'}, {name: 'b'}]} 
    renderItem={ 
    (item) => <Text>{item.name}</Text> 
    } 
    keyExtractor={(item, index) => index} 
/>

来源：here

来源

2017-06-14 13:15:45 Raymond

{item.name}没有工作。但{item.item.name}为我工作。可能是因为我在renderItem中给了（item）而不是（{item}）。由于@Raymond –

为什么renderItem = { （项目）=> {} item.name}工程和renderItem = { （项目）=> {{} item.name}}不起作用？ –

由于花括号。如果你要使用花括号，你需要添加一个return语句。 – Raymond

使用keyExtractor你不需要。 React Native docs有点不清楚，但key属性应该在data数组的每个元素中，而不是在呈现的子组件中。因此，而不是

<FlatList 
    data={[{id: 'a'}, {id: 'b'}]} 
    renderItem={({item}) => <View key={item.id} />} 
/> 
// React will give you a warning about there being no key prop

这是你所期望的东西，你只需要把key场在data阵列中的每个元素：

<FlatList 
    data={[{key: 'a'}, {key: 'b'}]} 
    renderItem={({item}) => <View />} 
/> 
// React is happy!

，绝对不要把一个随机字符串作为关键。

来源

2017-09-06 12:59:00 Ben

不起作用。 'keyExtractor'确实解决了这个问题。 – user3526468

在这里可以正常工作 – Julian

一个简单的解决方案是在给每个条目提供一个唯一的键之前使用FlatList，因为这是底层VirtualizedList需要跟踪每个条目。

users.forEach((user, i) => { 
    user.key = i + 1; 
});

该警告确实会首先执行此操作，或者提供自定义密钥提取器。

来源

2017-10-09 18:33:33 PieOhPah

基本扁平代码引发警告 - 反应原生

回答

相关问题