Question

我想使用expo-contacts在我的应用程序中呈现我的联系人列表，列表显示约2秒钟，然后出现typeError：undefined不是一个对象（正在评估“ item.phoneNumbers [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>
    );
  }
}

Answer 1

这是一个新答案，因为上一个没有主题。发生错误是因为显示的联系人没有phoneNumber。

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

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>
);

typeError：未定义不是对象（正在评估“ item.phoneNumbers [0]”）

1 个答案: