reactjs - undefined this.setState inside 'then' block

Question

I have the following function, this.setState is usable outside of the .then method.

  autoWork(e) {
    this.setState({ showWaiting: true });
    actions.autoSubmit(exampleVarOne, exampleVarTwo).then(function (results) {
      dbAction.fetch().then(response => {
        if (response.status === 200) {
          const responseData = response.data;
          this.setState({ disabledButton: true })
          this.setState({ showWaiting: false });
        }
      }).catch(function (error) {
        console.log(error);
        this.setState({ showWaiting: false });
      });
    });
  }

However I get the following error

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

for this line of code this.setState({ disabledButton: true })

this is not accessible inside the then block? How can I update the state inside the then block?

question from:https://stackoverflow.com/questions/66068524/undefined-this-setstate-inside-then-block

Answer 1

ECMAScript 6 introduced arrow functions, In your case, the anonymous function would not able to access "this" until it bound. They don't have their own this binding. Instead, this is looked up in scope just like a normal variable.

You need to add arrow function at first ".then" and as well as in ".catch"

 autoWork(e) {
    this.setState({ showWaiting: true });
    actions.autoSubmit(exampleVarOne, exampleVarTwo).then((results) => {
      dbAction.fetch().then((response) => {
        if (response.status === 200) {
          const responseData = response.data;
          this.setState({ disabledButton: true })
          this.setState({ showWaiting: false });
        }
      }).catch((error) => {
        console.log(error);
        this.setState({ showWaiting: false });
      });
    });
  }