Question

这样的输出错误=>

TypeError：TypeError：未定义不是对象（正在评估“ _this.state.userInfo.picture.data”）

我只想在react native中将来自Facebook的数据传递到我的视图中。它说undefined不是对象，如何解决这个问题？

预先感谢：）

从'react'导入React，{组件}; 从'react-native'导入{Text，TouchableOpacity，ScrollView，View，StyleSheet，Button，Alert，Image}; 从“ expo”导入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>
    );
}

}

常量样式= StyleSheet.create（{ 容器： { 弹性：1， justifyContent：“中心”， alignItems：'中心'， paddingTop：Constants.statusBarHeight， backgroundColor：'＃ecf0f1'， }，段落：{ 利润：24， fontSize：18， fontWeight：'bold'， textAlign：'居中'，颜色：“＃34495e”， }， }）;

Answer 1

尝试以这种方式声明您的userInfo。

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

此行中的“ this.state.userInfo”很有可能

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

仍为null，因此为null.picture.data.url，其中null不是对象。

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处。

我没有给出确切的解决方案，而是建议避免这种称为 null指针异常的错误。

请使用一些简单的实用程序库，例如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

尽量不要将状态设置为null！您可以这样初始化：

 userInfo : {
    picture: { }
 }

根据组件生命周期，构造函数将首先执行。您的任务是异步的，因此状态将保持 null ，直到从服务器检索数据为止。

如何解决此错误“未定义不是对象”？

4 个答案: