Как исправить эту ошибку «undefined не является объектом»?

Question

Ошибка вывода, подобная этой =>

TypeError: TypeError: undefined не является объектом (оценивает '_this.state.userInfo.picture.data')

там я просто хочу передатьДанные из фейсбука на мой взгляд реагируют на родные.он говорит, что undefined не является объектом, как это исправить?

Заранее спасибо:)

import React, {Component} from 'Reaction';import {Text, TouchableOpacity, ScrollView, View, StyleSheet, Button, Alert, Image} из реактивной системы;import Expo, {Constants} из 'expo';

класс экспорта по умолчанию HomeScreen расширяет компонент {

constructor(props){
    super(props);
    this.state = { userInfo: null }
}

async logInFB() {
    try {
      const {
        type,
        token,
        expires,
        permissions,
        declinedPermissions,
      } = await Expo.Facebook.logInWithReadPermissionsAsync('214751749451960', {
        permissions: ['public_profile'],
      });
      if (type === 'success') {
        // Get the user's name using Facebook's Graph API
        const response = await fetch(`https://graph.facebook.com/me?access_token=${token}&fields=id.name.picture.type(large)`);
        const userInfo = await response.json();
        this.setState({ userInfo });
        Alert.alert('Logged in!', `Hi ${(await response.json()).name}!`);
      } else {
        // type === 'cancel'
      }
    } catch ({ message }) {
      alert(`Facebook Login Error: ${message}`);
    }
}

_renderUserInfo = () => {
    return(
        <View style={{ alignItems:'center' }}>
            <Image
                source={{ uri: this.state.userInfo.picture.data.url}}
                style={{width:100, height:100, borderRadius:50}}
            />
            <Text style={{ fontSize:20 }}>
                { this.state.userInfo.name }
            </Text>
            <Text>ID: { this.state.userInfo.id }</Text>
        </View>
    );
}


render(){
    return(
        <View style={styles.container}>
            <Text>welcome to my apps!</Text>
            { !this.state.userInfo ? (<Button title="Connect with facebook" onPress={this.logInFB.bind(this)}/>) : (this._renderUserInfo())}
        </View>
    );
}

}

const styles = StyleSheet.create ({container:{flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '# ecf0f1',}, абзац: {margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', цвет: '# 34495e',},});

Answer 1

Старайтесь не устанавливать состояние на null в любом случае!Вы можете инициализировать так:

 userInfo : {
    picture: { }
 }

В соответствии с жизненным циклом компонента конструктор будет выполняться первым.Ваша задача асинхронная, поэтому состояние будет оставаться нулевым , пока данные не будут получены с сервера.

Answer 2

Вместо

import Expo, { Constants } from 'expo';

Попробуйте

import { Facebook, Constants } from 'expo';

Затем измените

await Expo.Facebook.logInWithReadPermissionsAsync

на

await Facebook.logInWithReadPermissionsAsync

см. https://forums.expo.io/t/import-expo-from-expo-has-been-deprecated/15799

Answer 3

Из кода очень ясно, что this.state.userInfo.picture.data.url обход цепи имеет undefined где-то посередине.

Я не даю точного решения, но предлагаю избегать ошибок такого типа, известных как исключения нулевого указателя .

Пожалуйста, используйте некоторую простую библиотеку утилит, такую ​​как idx для обхода свойств объектов.

// Using regular JavaScript 

getSourceURL = () => {
  if( this 
    && this.state 
    && this.state.userInfo 
    && this.state.userInfo.picture 
    && this.state.userInfo.picture.data 
    && this.state.userInfo.picture.data.url) {
    return this.state.userInfo.picture.data.url;
  } 
}

Вы можете добиться того же, используя idx , как показано ниже

// Using idx 

getSourceURL = () => {
  if( idx(this, _ => _.state.userInfo.picture.data.url )) {
    return this.state.userInfo.picture.data.url;
  }
}

Answer 4

Попробуйте объявить ваше userInfo в вашем состоянии таким образом.

constructor(props){
        super(props);
        this.state = { userInfo:{} }
    }

Возможно, что ваш "this.state.userInfo" в этой строке

source={{ uri: this.state.userInfo.picture.data.url}}

по-прежнему равен нулю, следовательно, null.picture.data.url, где ноль не являетсяобъект.