9

For me this error is quite often when using axios. I 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'))
georges619
  • 288
  • 1
  • 5
  • 16
Nane
  • 1,361
  • 3
  • 23
  • 61

1 Answers1

26

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
            })
        })
}
T.J. Crowder
  • 879,024
  • 165
  • 1,615
  • 1,639
  • hi T.J. Crowder i solved my problem, but getting confused why this happen could you explain above briefly? – shazim ali Sep 30 '20 at 08:30
  • @shazimali - Check out the answers [here](https://stackoverflow.com/questions/43558721/). Fundamentally, it's about making sure that `this` is what you want it to be in the function. Normally, `this` is set by how a function is called (see [here](https://stackoverflow.com/questions/3127429/) and/or [this aged post](http://blog.niftysnippets.org/2008/04/you-must-remember-this.html) on my anemic little blog). But an arrow function *closes over* `this` (like closing over a variable). So whatever `this` is in the `getdata` call, that's what it is in the axios callback as well. – T.J. Crowder Sep 30 '20 at 09:00
  • @shazimali - FWIW, I go into detail on the arrow function and how `this` works in Chapter 3 of my new book; links in my profile if you're interested. – T.J. Crowder Sep 30 '20 at 09:01