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()}
/>

来源：here

Answer 2

您不需要使用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!

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

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

一个简单的解决方案是在使用FlatList进行渲染之前，为每个条目指定一个唯一键，因为这是VirtualizedList跟踪每个条目所需的内容。

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

警告会先建议这样做，或提供自定义密钥提取器。

Answer 6

这段代码对我有用：

const content = [
  {
    name: 'Marta',
    content: 'Payday in November: Rp. 987.654.321',
  },]
 
  <FlatList
      data= {content}
      renderItem = { ({ item }) => (
        <View style={{ flexDirection: 'column',             justifyContent: 'center' }}>
      <Text style={{ fontSize: 20, fontWeight: '300', color: '#000000' }}>{item.name}</Text>
      <Text style={{ color: '#000000' }}>{item.content}</Text>
        
        />
      )}
      keyExtractor={(item,index) => item.content}
    />

Answer 7

您的数据中有一个“ id”

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

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

希望这会有所帮助！

Answer 8

如果您的数据不是对象： [实际上，它使用（数组中的）每个项目索引作为键]

   data: ['name1','name2'] //declared in constructor
     <FlatList
  data= {this.state.data}
  renderItem={({item}) => <Text>{item}</Text>}
  ItemSeparatorComponent={this.renderSeparator}
keyExtractor={(item, index) => index.toString()}
/>

Answer 9

这没有给出任何警告（将索引转换为字符串）：

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

Answer 10

试过雷的回答但后来得到一个警告，“钥匙必须是一个字符串”。如果您在项目本身上没有一个好的唯一键，则以下修改版本可以很好地抑制原始和此字符串键警告：

ping

当然，如果您在项目本身上确实有一个明显且好的唯一键，那么您可以使用它。

Answer 11

请确保编写return语句，否则将不返回任何内容。.发生了我。

Answer 12

这对我有用：

<FlatList
  data={items}
    data={[{name: 'a'}, {name: 'b'}]} 
    keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };
/>

Answer 13

这对我有用：

<FlatList
  data={items}
  renderItem={({ title }) => <Text>{title}</Text> }}
  keyExtractor={() => Math.random().toString(36).substr(2, 9)} />

将keyExtractor转换为string但不使用索引，而是使用随机生成的数字。

当我使用keyExtractor={(item, index) => index.toString()}时，它从未奏效并仍然发出警告。但也许这适用于某人？

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

13 个答案: