我正在尝试在以下端点描述一个对象:
https://api.cosmicjs.com/v1/67302ce0-7681-11e9-8193-4bd8888ec129/objects?pretty=true&hide_metafields=true
您会注意到,有一个带有唯一标识符的_id字段。
那我为什么得到:
“警告:遇到两个具有相同密钥:
的孩子。密钥应该
唯一,以便组件在更新期间保持其身份。
非唯一键可能会导致子代重复和/或省略—
该行为不受支持,并且可能在将来的版本中更改。”
这是我的FlatList渲染器:
render() {
if(this.props.dataToDisplay.objects){
console.log(typeof(this.props.dataToDisplay.objects))
console.log(this.props.dataToDisplay.objects)
this.props.dataToDisplay.objects.forEach((item)=>{
console.log(item)
})
return (
<View style={[{backgroundColor: this.state.backgroundColor},styles.container]}>
<FlatList
data={this.props.dataToDisplay.objects}
keyExtractor={(item, index)=>{item._id.toString()}}
renderItem={({item})=>{
<Text id={item._id}>{item.title}</Text>
}}
/>
</View>
);
}
else {
return (
<View style={[{backgroundColor:
this.state.backgroundColor},styles.container]}>
<Text>Loading elements.</Text>
</View>
);
}
}
}
keyExtractor可能有问题吗?
我尝试了keyExtractor = {(item,index)=> {item._id}},但没有结果...
谢谢你的时间。
最佳答案
keyExtractor
没问题。 return
函数不是:
keyExtractor={(item, index)=>{item._id.toString()}}
通过打开花括号
{}
,引擎需要return
关键字才能返回任何内容。否则,它是一个void
执行以下任一操作:
keyExtractor={(item, index)=> item._id.toString()}
要么:
keyExtractor={(item, index)=> { return item._id.toString()}}
renderItem方法也是如此:
renderItem={({item})=>{
<Text id={item._id}>{item.title}</Text>
}}
自从打开
{}
以来,您取消了arrow函数的隐式返回,因此必须显式地附加它renderItem={({item})=>{
return <Text id={item._id}>{item.title}</Text>
}}
顺便说一句,
id
不是<Text/>
的道具之一。如果没有keyExtractor函数,则必须自己附加key
属性(而不是id
)。放心将其删除=)关于json - 为什么我的React-Native FlatList中的相同键有double?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56174189/