Couldn't setState from the then function of the Promise

Question

I'm trying to update the state from the promise which I received using the fetch function.

componentDidMount(){  fetch(url).then((responseText) => {       var response = responseText.json();       response.then(function(response){          this.setState(response);      });    }); } 

I was getting the error that the setState is not an function

Then, I tried to bind(this) to pass the this value like below.

componentDidMount(){  fetch(url).then((responseText) => {       var response = responseText.json();       response.then(function(response){          this.setState(response);      });    }).bind(this); } 

It is not working now also. Same error again.

Answer 1

This is because of the scoping of this, so you're on to something when you're trying to use Function.prototype.bind. Your mistake is that you don't bind all the way down to the last anonymous function. What you probably want to do is use arrow functions all the way, like this:

componentDidMount(){     fetch(url)         .then((responseText) => responseText.json())         .then((response) => this.setState(response)); } 

Arrow functions always keep the context of this.

Answer 2

Sorry, Just now found that I didn't bind the this variable properly.

Now, It is fixed.

componentDidMount(){    fetch(url).then((responseText) => {      const response = responseText.json();      response.then(function(response){         this.setState(response);     });    }.bind(this));  }