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

【问题标题】：Why is there double with the same key in my React-Native FlatList?为什么在我的 React-Native FlatList 中有相同键的 double？
【发布时间】：2019-10-04 01:32:52
【问题描述】：

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

感谢您的宝贵时间。

【问题讨论】：

标签： json react-native react-native-flatlist

【解决方案1】：

用keyExtractor={(item, index)=>index.toString()}代替keyExtractor={(item, index)=>{item.key}}

【讨论】：

现在得到“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”奇怪的是 keyExtractor={(item, index)=>{item.key}} 现在也给了我这个错误。有没有办法用item的_id字段做key？？
@JulienFEGER 是的，你可以给 renderItem={({item})=>{ {item.title} }}
问题解决了，这个在上面 ;) 谢谢你的帮助。

【解决方案2】：

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/> 的道具之一。如果没有 keyExtractor 函数，您必须自己附加 key 属性（而不是 id）。放心删除它=)

【讨论】：

谢谢！！我没有错误了！但它仍然没有渲染任何东西：/即使只是尝试渲染 item ！，也没有打印出来。

【解决方案3】：

在您的示例中，您没有任何名为“key”的属性，因此您有错误。您应该尝试分配另一个属性，例如关键元素，也许是属性“_id”，它存在于您的对象中，如下所示：

<FlatList
data={this.props.dataToDisplay.objects}
keyExtractor={(item, index) => {item._id}}
numColumns={2}
renderItem={({item})=>{
  <Text id={item._id}>{item.title}</Text>
}}
/>

【讨论】：

是的，我尝试过...甚至尝试将其作为没有结果的字符串返回：s 开始认为这是我获取数据的异步问题。
您是否尝试在 Text 组件中添加键？类似于
也许你的问题是因为你在 data prop 中发送一个对象，在 React-native 文档中的 FlatList 示例中，必须发送一个对象数组来渲染数据：facebook.github.io/react-native/docs/flatlist跨度>