React native 基本平面列表代码引发警告-反应本机

平面列表似乎不起作用。我收到这个警告

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

代码：

{item.name}
} 
key={Math.random（）.toString（）}/>

只需执行以下操作：

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

{item.name}
} 
keyExtractor={（项，索引）=>index.toString（）}
/>

---

来源：

您不需要使用

keyExtractor

。属性有点不清楚，但是

键

属性应该放在

数据

数组的每个元素中，而不是放在渲染的子组件中。所以而不是

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

---

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

一个简单的解决方案是，在使用

平面列表进行渲染之前，只需为每个条目指定一个唯一的键，因为底层的
虚拟化列表
需要跟踪每个条目

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

警告不建议先执行此操作，或者提供自定义密钥提取程序。
这对我来说很有效：

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

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

{title}}
keyExtractor={（）=>Math.random（）.toString（36.substr（2,9）}/>

将
键提取器
转换为
字符串
，但不使用索引，而是使用随机生成的数字

当我使用
keyExtractor={（item，index）=>index.toString（）}
时，它一直不起作用，仍然发出警告。但也许这对某人有用？
这段代码对我有用：


const content=[
{
姓名：'玛尔塔'，
内容：“11月发薪日：987.654.321卢比”，
},]
(
{item.name}
{item.content}
/>
)}
keyExtractor={（项，索引）=>item.content}
/>
这对我很有用：

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

index.toString（）}
/>
尝试了Ray的答案，但随后收到一条警告：“密钥必须是字符串”。如果项目本身没有良好的唯一键，则以下修改版本可以很好地抑制原始和此字符串键警告：

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

当然，如果您在项目本身上有一个明显且良好的唯一键，您可以使用它。
在数据中有一个“id”

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

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

const数据=[
{
名称：‘a’，
身份证号码：1
},
{
名称：‘b’，
身份证号码：2
}];
{item.name}
} 
keyExtractor={item=>item.id}
/>

希望这有帮助
 如果您的数据不是对象：
[事实上，它使用数组中的每个项索引作为键]

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

data:['name1'，'name2']//在构造函数中声明
{item}
ItemSeparatorComponent={this.renderSeparator}
keyExtractor={（项，索引）=>index.toString（）}
/>
这没有给出任何警告（将索引转换为字符串）：

index+“”
伦德雷特={
（项目）=>{item.name}
} 
/>
您可以使用

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

index.toString（）}
/>

注意：使用index.toString（），即预期为字符串。
请确保编写return语句，否则它将不会返回任何内容

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

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

{
返回new Date（）.getTime（）.toString（）+（Math.floor（Math.random（）*Math.floor（new Date（）.getTime（））））.toString（）；}；
/>
{item.name}不起作用。但是{item.item.name}对我有用。可能是因为我在renderItem中给定了（item）而不是（{item}）。谢谢@raymondb，因为有卷曲的背带。如果要使用大括号，则需要添加return语句。这可能不起作用。删除和添加某些元素后，它开始显示重复的项。我认为keyExtractor的目的是使一个项目具有唯一性。理想情况下，每个项目都应该有一个唯一的id，并使用该id作为键。e、 keydextractor={item=>item.id}@JustWonder-right；如果要删除列表中的项，则不能将索引用作键，并且必须找到为每个项生成唯一键的另一种方法。对于只添加内容的情况，这种方法很好。返回的索引必须是字符串：
keydextractor={（item，index）=>index.toString（）}
@Li357。。。如果数据不变，则为持久性。随机键将导致在每次数据更改时对每个项目重新排序，这将是非常低效的。如下文所述，它应该是一个字符串，在正式回购上存在讨论。我认为react native团队想让用户不用索引作为键，但这不是一个好的解决方案。我应该能够使用db id作为密钥。我不需要将其转换为字符串。键应该是唯一的。使用随机字符串不是一个好主意。如上所述，这将导致不需要的重新渲染，因为如果react由于任何其他更改而尝试重新渲染，则random函数将返回不同的值。我听说你哥们，谢谢你。但是，如果您有5个
flatlists
或
keydextractor={（item，index）=>`${index}}}
<FlatList
  data={items}
    data={[{name: 'a'}, {name: 'b'}]} 
    keyExtractor = () => {
    return new Date().getTime().toString() + (Math.floor(Math.random() * Math.floor(new Date().getTime()))).toString();  };
/>