React Native对象数组转FlatList数据及联系人列表渲染报错问题

你遇到的这个报错核心原因很明确：FlatList的data属性接收的不是实际的联系人数组，而是一个Promise对象——因为getContactAsync()是async函数，调用它会立即返回Promise，而不是等待异步操作完成后的数组。FlatList拿到Promise后无法正确解析数据，自然就会出现索引越界的NaN错误。

下面是具体的修复步骤和修改后的代码：

1. 将联系人数据存入组件state #

首先在组件中初始化state，用来存储联系人数据和加载状态：

constructor(props) {
  super(props);
  this.state = {
    contacts: [],
    isLoading: true // 标记数据是否正在加载
  };
}

2. 在组件挂载时异步获取联系人并更新state #

使用componentDidMount生命周期方法（类组件的标准做法），在组件挂载后执行异步请求，拿到数据后更新state：

async componentDidMount() {
  try {
    // 先请求联系人权限（如果你的权限逻辑还没完善，这里补充上）
    const permissionResult = await Contacts.requestPermissionsAsync();
    if (!permissionResult.granted) {
      console.log("联系人权限被拒绝");
      this.setState({ isLoading: false });
      return;
    }

    // 获取联系人数据
    const { data: contacts } = await Contacts.getContactsAsync({
      fields: [
        Contacts.Fields.id,
        Contacts.Fields.name,
        Contacts.Fields.firstName,
        Contacts.Fields.lastName,
        Contacts.Fields.phoneNumbers
      ]
    });

    // 更新state，把联系人数据存进去
    this.setState({
      contacts: contacts || [],
      isLoading: false
    });
  } catch (error) {
    console.error("获取联系人失败:", error);
    this.setState({ isLoading: false });
  }
}

3. 修改FlatList的数据源指向state中的数组 #

现在FlatList可以直接使用state里的contacts数组，同时添加加载状态的处理：

render() {
  const { contacts, isLoading } = this.state;

  // 数据加载中时显示加载指示器
  if (isLoading) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <FlatList
      // 优先使用联系人的id作为key，比index更稳定（避免列表排序/更新时出现问题）
      keyExtractor={(item) => item.id.toString()}
      data={contacts}
      renderItem={({ item }) => (
        <ListItem title={item.name} />
      )}
    />
  );
}

额外说明 #

• 你提到的"当前数据结构"和"期望数据结构"其实是完全一致的，都是对象数组，所以数据格式本身没有问题，问题出在异步数据的处理方式上。
• 用item.id作为key比用index更好，因为index会随着列表项的增删排序变化，而id是唯一且稳定的，能提升FlatList的性能和稳定性。
• 加入加载状态和错误处理，能让你的应用在数据未准备好或请求失败时表现更友好。

内容的提问来源于stack exchange，提问作者Gautier Méheust