CODEWITHSUNDEEP
javascriptreactjs
typos
typos

Reputation: 6642

setState inside Promise in React

I have a function in my React code defined like this:

getAttachment(url) {
    fetch(url).then((responseText) => {

        var response = responseText.json();

        response.then(function(response){
            this.setState({ attachment: response });
        });
    }.bind(this));
}

But I get an error when this compiles, saying that I have an unexpected token at the .bind(this). Any ideas, how to set state inside a promise?

Upvotes: 9

Views: 13803

Answers (3)

Shashith Darshana
Shashith Darshana

Reputation: 2795

This has because you have a different scope inside the function. When using a function it has it's own scope. And "this" used out side the function is not the same when you use it inside the function. The best way of doing this is having a variable "that" and assign the previous "this" to "that".

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.getAttachment = this.getAttachment.bind(this);
        this.state = {attachmenet: ""};
    }

    getAttachment(url) {

         //Code you need to add
         var that = this;

         fetch(url).then((responseText) => {

            var response = responseText.json();

            response.then(function(response){
               //code you need to change
               that.setState({ attachment: response });
            });
         });
     }

     render() {
         this.getAttachment();
         return <div dangerouslySetInnerHTML={{__html:this.state.attachment}}>
       </div>;
     }


}

Upvotes: 8

Sean Wu
Sean Wu

Reputation: 31

try changing the getAttachment function to getAttachment = (url) => {...} and delete .bind(this)

Upvotes: 1

ktilcu
ktilcu

Reputation: 3128

Instead of binding this you could just scope the reference to this. like

var that = this;

and then reference that.setState.

Upvotes: 14

Related Questions