React API fetch returning an empty object

Question

I am having problems of receiving the data from a API fetch, I am guessing data might received after the console.log()?

How can I fix this?

fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
      .then(response => response.json())
      .then(data => {
        console.log(data[0])
      })

This code return a object data straight away

fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
      .then(response => response.json())
      .then(data => {
        this.setState({api: data[0] ,loading:false})
      })
      console.log(this.state.api)

However, I'll need to save the fetched data into the state, but when I call it after saving it, it returns a empty object, that influences me to print the data to UI.

Help....

Setting state is asynchronous, hence if you try to console it immediately it is empty. More can be found here stackoverflow.com/questions/36085726/… — msapkal
– msapkal, Commented May 30, 2020 at 8:23

Yousaf · Accepted Answer · 2020-05-30 08:24:35Z

1

state is updated asynchronously. If you want to see the updated state immediately after updating it, pass a second argument to setState function which is a callback function which runs after the state has updated

this.setState({api: data[0] ,loading:false}, () => console.log(this.state))

answered May 30, 2020 at 8:24

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

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

3 Comments

Vincent Ning Over a year ago

Hi mate, thanks for helping, I am not only trying to see it, because its running asynchronously, when I am trying to print it to the the screen in render(), its undefined, how can I print it after its actually fullly loaded?

Yousaf Over a year ago

inside render function, check if this.state.api is defined and print it only if it is defined

Vincent Ning Over a year ago

Yeah, Now i got it, you are a legend bro!

Shamanou · Accepted Answer · 2020-05-30 08:27:44Z

1

you are trying to resolve a promise and the console log is likely to be executed before the promise returns, try to following code to fetch your data:

fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
      .then(response => response.json())
      .then(data => {
        this.setState({api: data[0] ,loading:false},() => console.log(this.state.api))
      });

This always executes the log line after setting the state.

answered May 30, 2020 at 8:27

Shamanou

414 bronze badges

Collectives™ on Stack Overflow

React API fetch returning an empty object

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related