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

Question

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

谢谢你的时间。

Answer 1

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

btw，id不是<Text/>道具之一。如果没有 keyExtractor 函数，您必须自己附加key属性（而不是id）。感觉可以安全地删除它 =)