基本FlatList代码引发警告-React Native

FlatList似乎不起作用。我得到这个警告。

VirtualizedList：缺少项的键，请确保在每个项上指定键属性或提供自定义keyExtractor。

码：

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

只需执行以下操作：

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

资料来源：这里

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

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

这为我工作：

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

您可以使用

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

注意：使用index.toString（）即期望是字符串。

您的数据中有一个“ id”

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

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

希望这可以帮助 ！！！

一个简单的解决方案是在使用渲染之前，仅给每个条目一个唯一的键FlatList，因为这是VirtualizedList跟踪每个条目的基础需求。

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

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

此代码对我有用：

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

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

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

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

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

尝试了雷的答案，但随后收到警告，“键必须是字符串”。如果您在商品本身上没有很好的唯一键，则以下修改版本可以很好地抑制原始和此字符串键警告：

keyExtractor={(item, index) => item + index}

当然，如果您确实在商品本身上具有明显且良好的独特钥匙，则可以使用它。

请确保编写return语句，否则它将不返回任何内容。

这为我工作：

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

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

当我使用时keyExtractor={(item, index) => index.toString()}，它从未起作用，并且仍然发出警告。但这也许对某人有用吗？