Pulling Data from JSON with React-Native

Question

What's wrong with this picture ? :-)

I'm trying to pull values from my wordpress JSON objects.

I must not be addressing them the correct/proper way with React-Native.

Can someone direct me as to how to form the correct console log statement ?

As it stands right now, the variable 'theMediaLink' is coming up 'undefined' in the console log. :-(

  state={
    data:[]
  }

  fetchData = async() => {
    const response = await
    //response
    fetch('http://example.com/wp-json/wp/v2/posts/')
    //posts
    const posts = await response.json();
    this.setState({data:posts});

    const theMediaLink = `https://example.com/wp-json/wp/v2/media/` + `${this.state.data.featuredmedia}`;
    console.log('theMediaLink_value: ', theMediaLink);
  }

I should add that the fetch is retrieving data as I use it later on with a FLATLIST to pull the posts. My question is I must be misforming the call, but how ?

when using await i don't think you need to do response.json() — Sagiv b.g
– Sagiv b.g, Commented Sep 26, 2018 at 17:17
Another thing, setState is asynchronous. but you can use it's callback argument to run code just after the state has been updated: setState({key:value}, () => {...}) — Sagiv b.g
– Sagiv b.g, Commented Sep 26, 2018 at 17:19
please check the value of this.state.data.featuredmedia. Do console.log( this.state.data.featuredmedia) I think it is undefined. — Mohammed Ashfaq
– Mohammed Ashfaq, Commented Sep 26, 2018 at 17:22

Miles Works · Accepted Answer · 2018-09-26 19:05:21Z

1

This is more an issue of understanding of React rather than React Native.

Try this:

fetchData = async () => {
  const URL = 'http://example.com/wp-json/wp/v2/posts/'

  const response = await fetch(URL)

  const posts = await response.json();

  return this.setState({ data : posts }, () => {
    const { data } = this.state

    const theMediaLink = `https://example.com/wp-json/wp/v2/media/${ data.featuredmedia }`;

    console.log('theMediaLink_value: ', theMediaLink);
  });
}

Since setState is asynchronous, you won't be able to see the state update right away, that's why the callback is for.

More info on how to setState asynchronously and use its value after right here

edited Sep 26, 2018 at 19:05

Miles Works

6392 gold badges12 silver badges24 bronze badges

answered Sep 26, 2018 at 17:26

bumbaneitr11

1014 bronze badges

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

1 Comment

Miles Works Over a year ago

Gotcha. Ok. I had bypassed that little detail about state that it's async. Ooops. Well that cleans up my code very nicely. It wasn't that awful but it's a lot more straight forward in this form. The only reason I'm trying to set those constants above is because I can't seem to form the proper call to get the json object > 'wp:featuredmedia', where the : is causing havoc with the call. RN throws a fit every time I do. As shown here > stackoverflow.com/questions/52519548/…

Collectives™ on Stack Overflow

Pulling Data from JSON with React-Native

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related