如何将对象数组转换为 Flatlist 数据 - React Native答案

【问题标题】：How to convert array of object to Flatlist data - React Native如何将对象数组转换为 Flatlist 数据 - React Native
【发布时间】：2019-11-10 17:03:09
【问题描述】：

我想显示所有手机联系人的平面列表。现在我有一个对象数组，但平面列表不适用于对象。我尝试了很多在网上找到的东西，但都是徒劳的......

我仍然收到此错误：不变违规：试图获取超出范围索引 NaN 的帧。

我现在拥有的是：大批 [ 目的 { “名称”：“托托”， “身份证”：550， ... }, ... ]

我想要的是：大批 [ { 名称：“托托”，编号：550， ... }, ... ]

我的代码：

async getContactAsync() {
    // permissions

    // Get all contacts from device
    const { data: contacts } = await Contacts.getContactsAsync({
      fields: [
        Contacts.Fields.id,
        Contacts.Fields.name,
        Contacts.Fields.firstName,
        Contacts.Fields.lastName,
        Contacts.Fields.phoneNumbers
      ]
    });

    if (contacts.length > 0) {
      return contacts;
    }
  }

  keyExtractor = (item, index) => index.toString()

  renderItem = ({ item }) => (
    <ListItem
      title={item.name}
      ...
      }
    />
  )

  render () {
    return (
      <FlatList
        keyExtractor={this.keyExtractor}
        data={this.getContactAsync()}
        renderItem={this.renderItem}
      />
    )
  }

【问题讨论】：

console.log(contacts) 中显示了什么？
正如我所说：Array [ Object { "name": "toto", "id": 550, ... }, ... ]

标签： arrays react-native object

【解决方案1】：

你能在你的 if 状态中试试这个吗

if (contacts.length > 0){
       return contacts.map(item => {...item})
}

【讨论】：

首先是因为 {...item} 的语法错误。我用 [...item] 进行了更改，但我的错误又回来了：不变违规：试图获取超出范围索引 NaN 的帧。