Returning the error cannot read property 'setstate' of undefined reactjs

Question

Why can't I set the state to a state variable which I already defined in the state, I also tried to set state as this.state.propval = response.data.

State declaration,

constructor(props) {
        super(props);
        this.state = {
     propval:null,
        };
    }

Sending the axios request and getting the response here.

 axios.post('/eventcreate/createevent', data)
    .then(function (response) {
      alert(response.data)
      var result = response.data
      console.log("result out :"+result)
      this.setState({propval : result})
      this.propfun(response.data)
      self.forceUpdate()
    })

But getting the error

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined
(anonymous function)
src/components/forms/neweventcreation.js:306
  303 | alert(response.data)
  304 | var result = response.data
  305 | console.log("result out :"+result)
> 306 | this.setState({propval : result})
  307 | 
  308 | this.propfun(response.data)
  309 | self.forceUpdate()

Please help me to figure this out.

Ahsan Ali · Accepted Answer · 2018-10-11 04:23:45Z

This isn't working because this is different inside of axios. this inside axios refers to the axios object, not your react component.

If you use ES6, you would want to use arrow functions (which don't have their own this). Learn more about it

 axios.post('/eventcreate/createevent', data)
    .then((response) => {
      alert(response.data)
      var result = response.data
      console.log("result out :"+result)
      this.setState({propval : result})
      this.propfun(response.data)
      self.forceUpdate()
    })

If you are not using ES6, you would do it like :

var self = this;
axios.post('/eventcreate/createevent', data)
   .then(function (response) {
   ...
   self.setState({propval : result})
   ...
})

Tiisetso Tjabane · Accepted Answer · 2018-10-11 04:20:27Z

You have a scope problem. this in the axios.then() refers to the local scope.

seems you have already added a global reference with the variable self

try this

let that = this; //global scope
axios.post('/eventcreate/createevent', data)
.then(function (response) {
  //this referes to the current function scope.
  alert(response.data)
  var result = response.data
  console.log("result out :"+result)
  that.setState({propval : result}) // or self.setState({propval : result})
  that.propfun(response.data)  //or self.propfun(response.data) 
  self.forceUpdate()
})

read this article to learn more javascript scope

I would suggest you to use arrow function. We are not recommended to assign this to a local variable and use which is very ugly or doing direct binding. Best to go with arrow function

Nikhil Pathania · Accepted Answer · 2018-10-11 04:17:28Z

0

I think you need to bind the function where you have done axios post call. Or you can make that function anonymous. For eg:

postData(){
   .... axios call
}

becomes

postData = () => {
     ... axios call
}

answered Oct 11, 2018 at 4:17

Nikhil Pathania

8316 silver badges20 bronze badges

2 Comments

Nikhil Pathania Over a year ago

If you downvote something atleast tell the reason, no point in explaining stuff

Hemadri Dasari Over a year ago

I didn’t down vote your answer. The reason your answer is wrong because the OP has issue in axios post request because.then he uses regular function where he don’t get this context inside the function so either he has to assign this to a local variable and use that variable to do setState or bind that function in .then or use arrow function. But you suggested to bind the function where he placed axios post request which isn’t correct.

Juned Lanja · Accepted Answer · 2018-10-11 04:28:56Z

Because in es5 this is refers to object on which function in called. In your case it might be global scope window. You can use bind method.

axios.post('/eventcreate/createevent', data)
    .then(function (response) {
      alert(response.data)
      var result = response.data
      console.log("result out :"+result)
      this.setState({propval : result})
      this.propfun(response.data)
      self.forceUpdate()
    }.bind(this))

Or if your using es6 then you can also use arrow function

 axios.post('/eventcreate/createevent', data)
    .then((response) => {
      alert(response.data)
      var result = response.data
      console.log("result out :"+result)
      this.setState({propval : result})
      this.propfun(response.data)
      self.forceUpdate()
    })

Collectives™ on Stack Overflow

Returning the error cannot read property 'setstate' of undefined reactjs

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Related