基本FlatList代码抛出警告 - React Native

Question

FlatList似乎不起作用.我收到了这个警告.

VirtualizedList:缺少项目的键,确保在每个项目上指定键属性或提供自定义keyExtractor.

码:

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

Answer 1

只需这样做:

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

来源:这里

Answer 2

你不需要使用keyExtractor.该阵营本地文档是有点不清楚,但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!

绝对不要把随机字符串作为关键.

Answer 3

这对我有用:

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

Answer 4

您可以使用

 <FlatList   
  data={[]}  
  keyExtractor={(item, index) => index.toString()} 
 />

注意:使用index.toString()即期望为字符串.

Answer 5

在您的数据中有一个“id”

const data = [
{
  name: 'a',
  id: 1
},
{
  name: 'b',
  id: 2
}];

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

希望这可以帮助 ！！！