pyprism pyprism - 4 years ago 248
React JSX Question

React this is undefined

React

this
is undefined in promise . Here is my code:

export default class Album extends React.Component {

constructor(props) {
super(props);
}

componentDidMount () {
console.log(this.props.route.appState.tracks); // `this` is working
axios({
method: 'get',
url: '/api/album/' + this.props.params.id + '/' + 'tracks/',
headers: {
'Authorization': 'JWT ' + sessionStorage.getItem('token')
}
}).then(function (response) {
console.log(response.data);
this.props.route.appState.tracks.concat(response.data); // 'this' isn't working
}).catch(function (response) {
console.error(response);
//sweetAlert("Oops!", response.data, "error");
})
}


here is the error code:

TypeError: this is undefined
Stack trace:
componentDidMount/<@webpack:///./static/apps/components/Album.jsx?:81:17

Answer Source

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); // 'this' isn't working
        }.bind(this) )
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download