How to use fetch() API in React to setState

Question

I\'m trying to write a component in React that will use the fetch() API to get data from a website, then use setState to set a state equal to the data, and then finally rend

Answer 1

Write the fetch code into separate method, then you will be able to call this.setState({}) inside the ".then(..)" statement after adding a bind to the new function inside the constructor.

Example:

constructor(props){
     super(props)
     ...
     this.myFunc = this.myFunc.bind(this)
}

myFunc = () => {
    fetch('...')
       .then(response => response.json())
       .then(data => this.setState({ apiInfo: data }));
}

componentDidMount() {
    this.myFunc()
}

Answer 2

Your error message is telling you exactly what the problem is:

unable to setState of undefined

So you're trying call setState as a method of an object that doesn't exist at that point. As a property of what object are you trying to call setState as a method?

this.setState({apiInfo: jsonStr});

Yes, it's your this that's the problem. At the point that you're trying to call it - i.e. inside a .then() of a fetch call - this is actually undefined. You can see this in the Chrome Devtools:

I'm afraid that this is a slippery customer in JavaScript; its value can (and does) change depending upon the current context of your app.

There's several ways you can workaround this. One slightly clunky (but it works!) way is to capture your this value before you enter your .fetch() call, and assign it to another variable. You'll often see that or self variables used for this purpose, but they're just conventions. You can call the variable what you like.

Here's how I've reworked your componentDidMount() method capturing this to that, and calling that inside the .then():

componentDidMount() {
    const that = this;
    fetch("https://fcctop100.herokuapp.com/api/fccusers/top/recent")
        .then(function(response) {
            return response.json();
        })
        .then(function(jsonData) {
            return JSON.stringify(jsonData);
        })
        .then(function(jsonStr) {
            that.setState({ apiInfo: jsonStr });
            console.log(jsonStr);
        });
}

If you're comfortable using arrow functions, then another way is to replace your "normal" function call with one, like so:

.then(jsonStr => {
    this.setState({ apiInfo: jsonStr });
    console.log(jsonStr);
});

An arrow function's this is always the this that its parent defined.

Answer 3

It is saying setState is undefined because you're accessing it in the wrong context. You can either, convert the function into an arrow function or bind it to the right context. Here is an article as to When and why do we bind this to the React component method.

In your code, the change that can be made is either binding it

.then(function(jsonStr){
          this.setState({apiInfo: jsonStr});
          console.log(jsonStr);
      }.bind(this));

or using arrow function

.then((jsonStr)=>{
          this.setState({apiInfo: jsonStr});
          console.log(jsonStr);
      });

Answer 4

• this refers to the object which calls the function.
• every normal function has its own this however arrow functions does not (this here refers to the outside context i.e., what this is outside the function.).

So the possible solutions are

• Use Arrow function

componentDidMount = () => {
    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent').then(
            function(response){
                return response.json();
            }
            ).then(function(jsonData){
                return JSON.stringify(jsonData);
            }
            ).then(function(jsonStr){
                this.setState({apiInfo: jsonStr});
                console.log(jsonStr);
            });
}

• save this in some other variable earlier and pass it as argument.
• Bind this to the function

https://reactjs.org/docs/handling-events.html

Answer 5

 componentDidMount() {
    fetch('https://fcctop100.herokuapp.com/api/fccusers/top/recent')
      .then(response => response.json())
      .then(data => this.setState({ apiInfo: data }));
  }

In your render function you cannot just do this.state.apiInfo. This data is an array of objects, each object has keys like username img and more. You can see that if you console.log(this.state.apiInfo) inside the render function and outside the return.

To access and display the each object inside of the arrays values you can map through your apiInfo array.

render() {
const { apiInfo } = this.state;
apiInfo && console.log(apiInfo.map(item => item.img));
return (
  <div>
    {apiInfo &&
      apiInfo.map(item =>  <div> {item.img} </div> )}
  </div>
);
}

The native fetch API that comes with the browser uses JavaScript promises to resolve the asynchronous response.

When the data is fetched successfully, it will be stored in the local state with React’s this.setState() method. Then the render() method will trigger again and you can display the fetched data.

Arrow functions were introduced in ES6, and an arrow function does not have its own context and will instead use the same this as the context in which it was defined. We can use this fact and pass in an arrow function to the callback.