TypeError: Cannot read property 'setState' of undefined

Question

I am trying to setState of a component after a ajax callback receives data from REST api. here's my code for the component constructor

constructor(props) {
    super(props);
    this.state = { posts: [] };
    this.getPosts = this.getPosts.bind(this);
}

Then I have a componentDidMount method that looks like following.

componentDidMount() {
        this.getPosts();
}

Now here's my getPosts function where I am doing the ajax request.

getPosts = () =>  {
    $.ajax({
        type: 'get',
        url: urlname,
        success: function(data) {
            this.setState( { posts: data } )
        }
    });
}

I am tying to set the State but I am getting the following error.

this.setState is not a function

Not really sure what is causing this. It would be really helpful if someone points me to the right direction. Thanks in advance.

Shubham Khatri · Accepted Answer · 2018-04-16 13:18:21Z

8

Bind the callback function also so that this inside the callback points to the context of the React Component and not the callback function

getPosts = () =>  {
    $.ajax({
        type: 'get',
        url: urlname,
        success: (data) => {
            this.setState( { posts: data } )
        }
    });
}

or you could use bind like

getPosts = () =>  {
    $.ajax({
        type: 'get',
        url: urlname,
        success: function(data) {
            this.setState({ posts: data })
        }.bind(this)
    });
}

edited Apr 16, 2018 at 13:18

answered May 30, 2017 at 8:30

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

Shubham Khatri Over a year ago

No problem, glad to have helped. This is a common mistake that most people do. I will recommend you to look into binding whenver you get such an error in future

Amiga500 · Accepted Answer · 2017-05-30 08:30:00Z

4

The issue is related with loosing context of this. Please try this:

let self = this;
getPosts = () =>  {
    $.ajax({
        type: 'get',
        url: urlname,
        success: function(data) {
            self.setState( { posts: data } )
        }
    });
}

or you can use bind:

getPosts = () =>  {
        $.ajax({
            type: 'get',
            url: urlname,
            success: function(data) {
                self.setState( { posts: data } )
            }
        });
    }.bind(this)

answered May 30, 2017 at 8:30

Amiga500

6,16711 gold badges72 silver badges121 bronze badges

Comments

Divya Parashar · Accepted Answer · 2017-05-30 08:31:52Z

0

You have to store the context into a variable as "this" reference will not be available in the callback. Try below solution:

getPosts = () =>  {
let that=this;
    $.ajax({
        type: 'get',
        url: urlname,
        success: function(data) {
            that.setState( { posts: data } )
        }
    });
}

answered May 30, 2017 at 8:31

Divya Parashar

112 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'setState' of undefined

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related