基本平面列表代码抛出警告-反应本机

平面列表似乎没有工作。我得到这个警告。

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

密码:

<FlatList
data={[{name: 'a'}, {name: 'b'}]}
renderItem={
(item) => <Text key={Math.random().toString()}>{item.name}</Text>
}
key={Math.random().toString()} />
82044 次浏览
小开
最佳答案

只要这样做:

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

资料来源: 给你

小开

您不需要使用 keyExtractor。本地文件是有点不清楚的 但是 ABC1属性应该放在 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

这正是您所期望的，您只需要在 data数组的每个元素中放置一个 key字段:

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

而且绝对不要用随机的字符串作为密钥。

小开

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

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

该警告首先提供执行此操作的建议，或者提供自定义密钥提取器。

小开

这对我很有效:

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

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

当我使用 keyExtractor={(item, index) => index.toString()}的时候，它从来没有工作过，并且仍然踢出一个警告。但是也许这对某些人有用？

小开

这个代码对我有用:

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

希望这个能帮上忙! ! ！

小开

如果你的数据不是一个对象: [实际上它使用每个项目索引(在数组中)作为键]

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

这没有给出任何警告(将索引转换为字符串) :

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

你可以用

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

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

小开

一定要写返回语句，否则它将返回什么. . 发生在我身上。

小开

这对我很有效:

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

提交答案