React this is undefined

Probably it's not binding this.

Try replacing with arrow functions if you're able to use ES6 syntax. It automatically binds this:

.then( (response) => {
        console.log(response.data);
        this.props.route.appState.tracks.concat(response.data); // 'this' isn't working
    } )

Or bind manually:

.then(function (response) {
            console.log(response.data);
            this.props.route.appState.tracks.concat(response.data);
        }.bind(this) )

You can bind this into thoes functions. Or you also declare self = this in componentDidMount function. then using self instand of this in axios

Other way: using arrow function


Example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "My_Name"
    };
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  componentDidMount () {
    let node = this.refs.term;
    term.focus();
  }

  render () {
    return (
      <div>
        <input type="text" ref="term" />
      </div>
    );
  }
}

or you can use this module auto-bind

Tags:

This

Reactjs