Nane Nane - 1 month ago 42
Javascript Question

Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

For me this error is quite often when using axios.can't setstate with undefined property.Eventhough i am getting actual response .I am pretty confused.Any solution would be appreciated.

json reply by
axios reply

[ { main: 1,
left: 0,
right: 0,
top: 0,
bottom: 0,
cid: 6,
'$created': '2016-10-21T11:08:08.853Z',
'$updated': '2016-10-22T07:02:46.662Z',
stop: 0 } ]


code.js

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
export default class Main extends React.Component{
constructor(props){
super(props);
this.state = {
status:[]
}
}
componentDidMount(){

this.getdata()
}
getdata(){
axios.get('/getactions')
.then(function (data) {
console.log(data.data);

this.setState({
status:data
})
})
}

render(){
console.log(this.state)
return(
<div>
<button >Left</button>

</div>
)
}
}


ReactDOM.render(<Main/>,document.getElementBy

Id('app'))

Answer

this within a standard function is usually determined by how it's called, not where the function was created. So this in the callback function here is not the same as this outside it:

getdata(){
    axios.get('/getactions')
        .then(function (data) {
            console.log(data.data);

            this.setState({
                status:data
            })
        })
}

Arrow functions, however, close over the this of their context, so:

getdata(){
    axios.get('/getactions')
        .then(data => {                // <== Change is here
            console.log(data.data);

            this.setState({
                status:data
            })
        })
}