undefined 不是一個對象（評估 'item.phoneNumbers[0]'）

Question

我正在嘗試顯示聯系人列表，並且在 IOS 中它工作正常，但在 ANDROID 中我收到此錯誤：

undefined is not an object (evaluating 'item.phoneNumbers[0]').

到目前為止，我已經讀到出現此錯誤的原因是因為我應該在顯示之前先檢查電話號碼是否存在，但這是我已經在我的代碼中完成的事情，但我仍然收到此錯誤。 如果有什么我弄錯了，請告訴我。 下面我將附上我的代碼。

function ContactList({ selectedContacts, setSelectedContacts, contacts, selectedGuardian, setSelectedGuardian }) {
  const [checked, setChecked] = useState(false);
  const [filter, setFilter] = useState([]);
  const [search, setSearch] = useState('');
  const [checkedBox, setCheckedBox] = useState(false);

  useEffect(() => {
    setFilter(contacts);
  }, [contacts]);

  const searchFilter = (text) => {
    if (text) {
      const newData = contacts.filter((item) => {
        const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();

        const textData = text.toUpperCase();
        return itemData.indexOf(textData) > -1;
      });
      setFilter(newData);
      setSearch(text);
    } else {
      setFilter(contacts);
      setSearch(text);
    }
  };

  // console.log('contacts: ',contacts);

  const onChangeValue = (item) => {
    const fullName = item.firstName;
    const phoneNumbers = item.phoneNumbers[0].digits;
    const phoneNumberAndroid = item.phoneNumbers[0].number;
    {Platform == 'ios' ? setSelectedContacts({ ...selectedContacts, [phoneNumbers]: !selectedContacts[phoneNumber] }) : setSelectedContacts({ ...selectedContacts, [phoneNumberAndroid]: !selectedContacts[phoneNumberAndroid] })};
    {Platform == 'ios' ? setSelectedGuardian([...selectedGuardian, { name: fullName, phone: phoneNumbers }]) : setSelectedGuardian([...selectedGuardian, { name: fullName, phone: phoneNumberAndroid }]) };
  };

  
 



  const renderItem = ({ item, index }) => {
    const phoneNumberAndroid = item.phoneNumbers[0].number;
    const phoneNumbers = item.phoneNumbers[0].digits;
    

    


    return (
      <SafeAreaView>
        <ScrollView>
          <TouchableOpacity
            onPress={() => {
              onChangeValue(item);
            }}
            style={{ flex: 1, flexDirection: 'row', borderTopWidth: 0.5, borderTopColor: 'grey' }}
          >
            <View style={{ flex: 1 }}>
              <Text onPress={() => setChecked(true)} style={{ fontSize: 20, marginHorizontal: 10 }}>
                {item.name + ' '}
              </Text>
              <Text style={{ fontSize: 17, marginHorizontal: 10, marginTop: 5, color: 'grey' }}>
              {item.phoneNumbers && item.phoneNumbers[0] && item.phoneNumbers[0].number}
              </Text>
            </View>
            <CheckBox
              style={{ width: 15, height: 15, paddingTop: 8 }}
              right={true}
              checked={ Platform == 'ios' ? !!selectedContacts[phoneNumbers] : !!selectedContacts[phoneNumberAndroid]}
              onPress={() => {
                onChangeValue(item, index);
              }}
            />
          </TouchableOpacity>
        </ScrollView>
      </SafeAreaView>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <View
          style={{
            height: 40,
            justifyContent: 'center',
            backgroundColor: '#eeeeee',
            width: '90%',
            marginHorizontal: 20,
            marginTop: 15,
            borderRadius: 10,
          }}
        >
          <Feather name="search" size={20} color="grey" style={{ position: 'absolute', left: 32 }} />
          <TextInput
            placeholder="Search"
            placeholderTextColor="#949494"
            style={{
              left: 20,
              paddingHorizontal: 35,
              fontSize: 20,
            }}
            value={search}
            onChangeText={(text) => {
              searchFilter(text);
              setSearch(text);
            }}
          />
        </View>
        <FlatList
          style={{ marginTop: 15 }}
          data={filter}
          keyExtractor={(item) => `key-${item.id.toString()}`}
          renderItem={renderItem}
          refreshing={true}
          initialNumToRender={10}
          ListEmptyComponent={<Text message="No contacts found." />}
        />
      </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default ContactList;

Answer 1

我首先關注您代碼的這一部分：

{Platform == 'ios' ? setSelectedContacts({ ...selectedContacts, [phoneNumbers]: !selectedContacts[phoneNumber] }) : setSelectedContacts({ ...selectedContacts, [phoneNumberAndroid]: !selectedContacts[phoneNumberAndroid] })};
{Platform == 'ios' ? setSelectedGuardian([...selectedGuardian, { name: fullName, phone: phoneNumbers }]) : setSelectedGuardian([...selectedGuardian, { name: fullName, phone: phoneNumberAndroid }]) };

從我在這里注意到的情況來看， Platform是 iOS 還是 Android 的區別在於，在 iOS 中使用phoneNumbers而在 Android 中使用phoneNumberAndroid ！

然后，我看到了上面的兩行代碼：

const phoneNumbers = item.phoneNumbers[0].digits;
const phoneNumberAndroid = item.phoneNumbers[0].number;

如果我沒記錯的話， Android在這里使用item.phoneNumbers[0].number 。

所以，我能想到顯示錯誤的唯一原因是item.phoneNumbers[0].number無效！

雖然我不確定這一點，但我想不出任何其他原因。 對不起，如果這是不正確的！