我正在尝试在以下端点描述一个对象:
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/

10-10 08:04