Javascript typeError:undefined不是对象（正在计算和#x27；项。电话号码[0]'；）

我想使用expo contacts在我的应用程序中呈现我的联系人列表，该列表显示约2秒，然后我得到typeError:undefined不是一个对象（正在评估“item.phoneNumber[0]”）。我已经检查了文档，看看是否有错误，但没有发现任何错误。有人对此有什么看法吗

下面是我的代码

ContactList.js

import React, { Component } from "react";
import {
  View,
  Text,
  Platform,
  StatusBar,
  FlatList,
  StyleSheet,
  ActivityIndicator
} from "react-native";
import * as Contacts from "expo-contacts";
import * as Permissions from "expo-permissions";

class ContactList extends Component {
  static navigationOptions = {
    header: null
  };

  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      contacts: []
    };
  }

  async componentDidMount() {
    this.setState({
      isLoading: true
    });

    this.loadContacts();
  }

  loadContacts = async () => {
    const permissions = await Permissions.askAsync(Permissions.CONTACTS);

    if (permissions.status !== "granted") {
      return;
    }

    const { data } = await Contacts.getContactsAsync({
      fields: [Contacts.Fields.PhoneNumbers, Contacts.Fields.Emails]
    });

    this.setState({
      contacts: data,
      isLoading: false
    });
  };

  handleBack() {
    this.props.navigation.goBack();
  }

  renderItem = ({ item }) => (
    <View style={{ minHeight: 70, padding: 5 }}>
      <Text>
        {item.firstName}
        {item.lastName}
      </Text>
      <Text>{item.phoneNumbers[0].digits}</Text>
    </View>
  );

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

    emptyContact = (
      <View style={styles.emptyContactStyle}>
        <Text style={{ color: "red" }}>No Contacts Found</Text>
      </View>
    );

    return (
      <SafeAreaView style={styles.contentWrapper}>
        <View style={styles.contentWrapper}>
          {isLoading ? (
            <View style={styles.isLoadingStyle}>
              <ActivityIndicator size="large" color="#2484E8" />
            </View>
          ) : null}
          <FlatList
            data={contacts}
            renderItem={this.renderItem}
            keyExtractor={(item, index) => index.toString()}
            ListEmptyComponent={emptyContact}
          />
        </View>
      </SafeAreaView>
    );
  }
}

import React，{Component}来自“React”；
进口{
看法
文本，
平台，
状态栏，
平面列表，
样式表，
活动指示器
}从“反应本族语”；
从“expo Contacts”导入*作为联系人；
从“expo Permissions”导入*作为权限；
类ContactList扩展组件{
静态导航选项={
标题：空
};
建造师（道具）{
超级（道具）；
此.state={
孤岛加载：false，
联系人：[]
};
}
异步组件didmount（）{
这是我的国家({
孤岛加载：正确
});
这是loadContacts（）；
}
loadContacts=async（）=>{
const permissions=wait permissions.askAsync（permissions.CONTACTS）；
如果（permissions.status！=“已授予”）{
返回；
}
const{data}=await Contacts.getContactsAsync({
字段：[Contacts.fields.phonenumber，Contacts.fields.email]
});
这是我的国家({
联系人：数据，
孤岛加载：false
});
};
车把{
this.props.navigation.goBack（）；
}
renderItem=（{item}）=>(
{item.firstName}
{item.lastName}
{item.phoneNumbers[0]。digits}
);
render（）{
const{isLoading，contacts}=this.state；
让emptyContact=null；
emptyContact=(
找不到联系人
);
返回(
{孤岛加载(
)：null}
index.toString（）}
ListMPtyComponent={emptyContact}
/>
);
}
}

这里有一个新答案，因为前一个答案与主题无关。出现此错误是因为显示的联系人没有电话号码

在显示电话号码之前，应首先检查该号码是否存在：

renderItem = ({ item }) => (
  <View style={{ minHeight: 70, padding: 5 }}>
    <Text>
      {item.firstName}
      {item.lastName}
    </Text>
    <Text>
      {item.phoneNumbers && item.phoneNumbers[0] && item.phoneNumbers[0].digits}
    </Text>
  </View>
);

renderItem=（{item}）=>(
{item.firstName}
{item.lastName}
{item.phoneNumbers&&item.phoneNumbers[0]&&item.phoneNumbers[0]。数字}
);

您是否尝试删除函数renderItem中包含参数的大括号？能否发布组件FlatList的代码？哪个大括号？FlatList组件来自react native