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

Question

I want to display a flatlist of all the phone's contacts. Now I have an Array of objects but the flatlist doesn't works with objects. I tried a lot of things found on the web but in vain...

I still get this error : Invariant violation: Tried to get frame for out of range index NaN.

What I have now is : Array [ Object { "name": "toto", "id": 550, ... }, ... ]

What I would like is : Array [ { name: "toto", id: 550, ... }, ... ]

My code :

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}
      />
    )
  }

Answer 1

can you try this inside your if state

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