反应原生列表列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React native list Each child in a list should have a unique "key" prop反应原生列表列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2019-10-02 21:17:07
【问题描述】：

我只是想做一个场地列表。

这是console.log(this.state.venues)的结果：

Array [
    Object {
        "key": "5b0ac89e***",
        "venuename": "Venue1",
    },
    Object {
        "key": "557d70asd****",
        "venuename": "Venue2",
    },
    Object {
        "key": "58f316ccsa****",
        "venuename": "Venue3",
    },
]

我通过像这样从 fq-api 中提取这些数据来创建这些数据：

for (var i=0; i < 5; i++) {
    this.state.venues.push({
        venuename: response.data.response.groups[0].items[i].venue.name,
        key: response.data.response.groups[0].items[i].venue.id
    });
}

这是我的 JSX：

<View style={styles.list}>
    <FlatList data={[this.state.venues]}
              renderItem={({item}) => <Text style={styles.item}>{item.venuename}</Text>}
              keyExtractor={(item, index) => item.key} />
</View>

我收到列表中的每个孩子都应该有一个唯一的“关键”道具错误。对我来说一切似乎都很好，我不明白为什么它会失败。我不知道这个“关键道具”是什么，我从 fetch 中得到它并尝试使用它，但我无法继续。

感谢您的帮助。

【问题讨论】：

item.key 是否始终设置？ keyExtractor={(item, index) => item.key}
是的，每个对象都有它
你确定应该是data={[this.state.venues]}吗？因为venues 已经是一个数组，所以听起来你应该有data={this.state.venues}。
你说得对，我错过了。非常感激！ @GhassenLouhaichi

标签： reactjs react-native

【解决方案1】：

你的错误在你的 data 属性中。

您将二维数组放入 data 道具，因此 keyExtractor 将尝试提取：[].key (undefined) 而不是 item.key...

我认为由于二维数组，您也只呈现列表中的一项，我是对的吗？

【讨论】：

你是对的，显然我试图渲染一个数组的数组。从数据道具中删除 [] 解决了这个问题！