How to fix this error 'undefined is not an object'?

Question

The output error like this:

TypeError: TypeError: undefined is not an object (evaluating '_this.state.userInfo.picture.data')

there I just want passing data from facebook into my view in react native . it says undefined is not an object, how to fix this ?

Here is the HomeScreen component's code:

import React, { Component } from 'react';
import { Text, TouchableOpacity, ScrollView, View, StyleSheet, Button, Alert, Image } from 'react-native';
import Expo, { Constants } from 'expo';

export default class HomeScreen extends Component {

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

Here is the styling (They are both on the same file):


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

Thanks in advance :)

i already using this .bind into my buttonevent, but still not work for me , onPress={this.logInFB.bind(this)} — Jhony Do
– Jhony Do, Commented Dec 24, 2018 at 1:47
Try logging the userInfo object, and checking if it has a property called 'picture'. It's possible the Facebook isn't giving you that property if a user has no picture — ack_inc
– ack_inc, Commented Dec 24, 2018 at 2:02

Jason Hong · Accepted Answer · 2018-12-24 09:11:20Z

1

Try declare your userInfo in your state this way.

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

It's possible that your "this.state.userInfo" in this line

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

is still null, hence, null.picture.data.url where null is not an object.

answered Dec 24, 2018 at 9:11

Jason Hong

797 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T. Cervenka · Accepted Answer · 2019-01-22 23:00:25Z

0

Instead of

import Expo, { Constants } from 'expo';

Try

import { Facebook, Constants } from 'expo';

Then change

await Expo.Facebook.logInWithReadPermissionsAsync

to

await Facebook.logInWithReadPermissionsAsync

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

answered Jan 22, 2019 at 23:00

T. Cervenka

3211 gold badge3 silver badges11 bronze badges

Comments

Uday Sravan K · Accepted Answer · 2019-05-22 15:11:27Z

0

From the code it's very clear that this.state.userInfo.picture.data.url chain traversing has undefined somewhere in between.

I'm not giving the exact solution but a suggestion to avoid this type of errors known as null pointer exceptions .

Please use some simple util library like idx for traversing properties on objects.

// 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;
  } 
}

You can achieve the same using idx as below

// Using idx 

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

answered May 22, 2019 at 15:11

Uday Sravan K

1,5041 gold badge15 silver badges20 bronze badges

1 Comment

Aman Gupta Over a year ago

plus 1 introducing idx.

Matin Zadeh Dolatabad · Accepted Answer · 2019-07-30 10:44:50Z

0

Try not to set state to null anyway! You can initialize like this :

 userInfo : {
    picture: { }
 }

According to component lifecycles constructor will execute first. Your task is asynchronous so the state will stay null till data is retrieved from server.

answered Jul 30, 2019 at 10:44

Matin Zadeh Dolatabad

1,0378 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to fix this error 'undefined is not an object'?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related