cannot setState using axios

Question

componentDidMount() {
  var self = this;

  axios.get('http://URL')
    .then(function (response) {
      console.log(response.data);
      this.setState({
        data: response.data
      })
    })
    .catch(function (error) {
      console.log(error);
    });
}

I got this error: TypeError: Cannot read property 'setState' of undefined

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — charlietfl, Sep 15 '18 at 12:08
Use `self` instead of `this` if you don't use arrow function — charlietfl, Sep 15 '18 at 12:09

Hemadri Dasari · Accepted Answer · 2018-09-15T12:16:30.273

Use arrow function so that you no need to depend on local variable and scope will be taken care automatically

 componentDidMount(){
     axios.get('http://URL')
         .then( response => {
            console.log(response.data);
            this.setState({data: response.data})
     })
    .catch(error =>  {
        console.log(error);
   });
 }

Or replace this with self while doing setState like below

  componentDidMount(){
      var self = this;
      axios.get('http://URL')
         .then(function (response) {
             console.log(response.data);
             self.setState({data: response.data})
     })
    .catch(function (error) {
       console.log(error);
    });
  }

Both the above options will work. I would recommend you to go with first option

score 0 · Answer 2 · answered Sep 15 '18 at 12:27

0

If you use self instead of this on setState should fix.

answered Sep 15 '18 at 12:27

Vinicius Zomer

151
9

score 0 · Answer 3 · answered Sep 15 '18 at 12:32

You can use ES6 arrow function that automagically binds lexical parent scope for you.

componentDidMount(){
     axios.get('http://URL')
         .then( response => {
            console.log(response.data);

            this.setState({
                data: response.data
            })
     })
    .catch(error =>  {
        console.log(error);
   });
 }

Introducing self is overkill and comes from jQuery. It was used before ES6 arrow function been introduced.

You can read about auto this binding in arrow functions here:

https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

Also check those links to better understand how this works in Javascript and the logic of scope:

https://scotch.io/tutorials/understanding-scope-in-javascript https://javascriptplayground.com/javascript-variable-scope-this/

score 0 · Answer 4 · answered Sep 15 '18 at 17:48

You can avoid the this context problem and use this alternative. Since Axios returns a promise, you can use async/await, and don't think about the this context.

Use it like this:

async function getData(url){
    try {
        return await axios.get(url);
    } catch(error) {
        console.log(error);
    }
}

async componentDidMount(){
    let response = await getData('http://URL');
    console.log(response.data);
    this.setState({data: response.data});
 }

Looks more readable and easier to use for other functions and components as well.

cannot setState using axios

4 Answers4