0

When I use react with es6 and jquery's ajax function, I got this.setState() is not a function error. I tried bind this within constructor using this.componentDidmount = this.componentDidmount.bind(this);, but still not working.

Can any one help me? Thanks!

Here is my code:

import React from 'react';
import $ from 'jquery';

class UserGist extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      lastGistUrl: ''
    };
  }

  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function(result) {
      let lastGist = result[0];
      this.setState({
        userName: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    });
  }

  componentWillUnmount() {
    this.serverRequest.abort();
  }

  render() {
    return(
      <div>
        {this.state.userName}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    )
  }
}

export default UserGist;
Failed Scientist
  • 1,977
  • 3
  • 29
  • 48
jack-nie
  • 736
  • 6
  • 21

1 Answers1

1

The this context for the callback function inside componentDidMount() isn't set.

You could use an arrow function to do it, like so:

this.serverRequest = $.get(this.props.source, (result) => {
  let lastGist = result[0];
  this.setState({
    userName: lastGist.owner.login,
    lastGistUrl: lastGist.html_url
  });
})
Jonny Buchanan
  • 61,926
  • 17
  • 143
  • 150
  • when I remove `this.componentDidMount = this.componentDidMount.bind(this); this.componentWillUnmount = this.componentWillUnmount.bind(this);`, it also works, does this two functions auto bind `this` ? – jack-nie Jun 25 '16 at 06:41
  • 1
    Yes, all React lifecycle methods are autobound for you. The issue you were having was that you tried to use 'this' in an asynchronous code - a callback function. See http://stackoverflow.com/a/20279485/3979621 for explanation. – Jan Kalfus Jun 25 '16 at 07:31
  • @freddy: *"Yes, all React lifecycle methods are autobound for you."* No. `React.createClass` did that, but that doesn't happen with the `class` syntax. – Felix Kling Jun 25 '16 at 09:52
  • @FelixKling Ah, yes, you are right. However, could you please give an example where `this` in a lifecycle method would not refer to an instance of the class containing the method when used synchronously? – Jan Kalfus Jun 25 '16 at 10:17
  • @freddy: There is none. Inside a lifecycle method, `this` will always refer to the React component. – Felix Kling Jun 25 '16 at 10:23