Getting undefined when json fetch in react native

Question

In my simplified code below I am able to pull data in JSON format but if I try to console log a specific key of the object, I get undefined.

I had thought I could use this.state.profile.name to display "Steven". Why is this coming up as undefined when I'm able to see the entire response? Thanks!

state = {
responseJSON: null,
};
callGraph = async token => {

const response = await fetch(
  `https://graph.facebook.com/me?access_token=${token}&fields=id,name,email,about,picture`
);
const responseJSON = JSON.stringify(await response.json());

  this.setState({ 
    profile: responseJSON
  });

console.log("profile = " + this.state.profile);
};

this console.log output the following:

profile = {"id":"*******","name":"Steven *******","email":"steve@*******.com","picture":{"data":{"height":50,"is_silhouette":false,"url":"https://platform-lookaside.fbsbx.com/platform/profilepic/?asid=*******&height=50&width=50&ext=1539943832&hash=AeQM2VfUBmdfOVJZ","width":50}}}

Also it should be state = { profile: null}. But I don’t think that will solve your issue. — Kevin Amiranoff
– Kevin Amiranoff, Commented Sep 20, 2018 at 8:44
Something else must be wrong in your code. Because if your console log git you this output, you should be able to log this.state.profile.name too — Kevin Amiranoff
– Kevin Amiranoff, Commented Sep 20, 2018 at 9:08

Kevin Amiranoff · Accepted Answer · 2018-09-19 10:40:10Z

4

setState is asynchronous.

In your code, you are trying to console.log before the state is updated.

You need to use the callback as the second argument of the setState function:

 this.setState({ 
    profile: responseJSON
  }, () => {
console.log("profile = " + this.state.profile);

});

Check this post for more information or also this other question

edited Sep 19, 2018 at 10:40

answered Sep 19, 2018 at 10:35

Kevin Amiranoff

14.7k16 gold badges65 silver badges95 bronze badges

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

Comments

Saeid · Accepted Answer · 2018-09-19 16:14:11Z

2

setState is asynchronous. The answer of Kevin is completely right. However, you can also use this method to see the result immediately:

this.profile= responseJSON;
console.log("profile = " + this.profile);

You should also define it in the constructor like this:

  constructor(props) {
    super(props);
    this.profile='';
   }

Also, in order to access the parameter of profile in your screen you need to use this.profile.

answered Sep 19, 2018 at 16:14

Saeid

2,0564 gold badges28 silver badges46 bronze badges

4 Comments

Kevin Amiranoff Over a year ago

good point! And thank you for saying I was completely right ahah

Steven Sheffey Over a year ago

So sorry guys, looks like my question was cut off a bit. I followed Kevin's original answer and I'm trying to output a parameter like name but get "undefined". this.setState({ profile: responseJSON }, () => { console.log("profile = " + this.state.profile.name); });

Saeid Over a year ago

@StevenSheffey: That is strange, how about my approach? dose it work?

Steven Sheffey Over a year ago

@Reza Strange indeed, I will try your solution tonight and get back to you guys asap.

Collectives™ on Stack Overflow

Getting undefined when json fetch in react native

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related