时间戳

首页 > 解决方案 > 为什么在我的 React-Native FlatList 中有相同键的 double？

json - 为什么在我的 React-Native FlatList 中有相同键的 double？

问题描述

我正在尝试获取在以下端点描述的对象： 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}} 没有结果...

谢谢你的时间。

标签： jsonreact-nativereact-native-flatlist

解决方案

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

自从你打开了{}，你取消了箭头函数的隐式返回，你必须明确地附加它

renderItem={({item})=>{
        return <Text id={item._id}>{item.title}</Text>
         }}

顺便说一句，id不是<Text/>'s 的道具之一。如果没有 keyExtractor 函数，您必须自己附加key属性（而不是id）。感觉安全删除它=）

推荐阅读