When this.setState() is used within the $.get scope I get the following error

Uncaught TypeError: undefined is not a function

It works fine outside the $.get scope.

How can I fix this?

$.get(APIURL, function (data) {
   this.setState({resdata: "This is a new state"});
});

I'm not sure what is the best practice to replace jQuery AJAX to other small AJAX libraries.

When this.setState() is used within the $.get scope I get the following error

Uncaught TypeError: undefined is not a function

It works fine outside the $.get scope.

How can I fix this?

$.get(APIURL, function (data) {
   this.setState({resdata: "This is a new state"});
});

I'm not sure what is the best practice to replace jQuery AJAX to other small AJAX libraries.

• javascript
• jquery
• reactjs

• I'm guessing setState is some function that is available on whatever this is outside the callback function, but it's not very clear – adeneo Commented Nov 27, 2014 at 16:33

2 Answers 2

You can save a reference to the outer this:

var that = this;
$.get(APIURL, function (data) {
   that.setState({resdata: "This is a new state"});
});

Or use $.proxy:

$.get(APIURL, $.proxy(function (data) {
   this.setState({resdata: "This is a new state"});
}, this));

The this you use inside the function normally refers to the jqXHR object, ref http://api.jquery./jquery.ajax/

You can use bind(this) either, like in the React Documentation:

https://facebook.github.io/react/tips/initial-ajax.html

Here's a snippet of code:

ponentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },