Using this.setState in a callback

Question

I have the following code getting a twitter timeline in a react component:

  componentWillMount: function() {
    twitter.get('statuses/user_timeline',
    function(error, data) {
      this.setState({tweets: data})
     });
  }

But I can't set the state there, because this isn't set to the component in that callback function.

How can I set the state within that callback?

n.b. console.log(data) instead of this.setState works fine, which is why I suspect the problem is with the this variable.

Answer 1

You can set this with .bind method like this, and call twitter.get in componentDidMount as in this example

componentDidMount: function() {
   twitter.get('statuses/user_timeline', function(error, data) {
      this.setState({tweets: data})
   }.bind(this)); // set this that refers to you React component
}

Example

Answer 2

Never perform ajax call in componentWillMount.

Do it in componentDidMount.

Also there is a scope problem, for that use what Alexander suggest (bind). Another possibility is:

componentDidMount: function() {
    var self = this;
    twitter.get('statuses/user_timeline', function(error, data) {
        self.setState({tweets: data})
    });
}

Also more details here http://facebook.github.io/react/tips/initial-ajax.html (already underlined by klimo in comments)

Answer 3

There are 2 ways by putting it inside componentDidMount, you can solve the issue :

1. Bind this scope to the function

.bind(this)

twitter.get('statuses/user_timeline', function(error, data) {
   this.setState({tweets: data})
}).bind(this);

2. Use fat arrow

=>

twitter.get('statuses/user_timeline', (error, data) => {
   this.setState({tweets: data})
});