undefined this.setState inside 'then' 块

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?

Answer 1

Yes, that's because function 's can set their own this context. You can easily avoid that by using an arrow function instead:

Change:

    actions.autoSubmit(exampleVarOne, exampleVarTwo).then(function (results) {

to

    actions.autoSubmit(exampleVarOne, exampleVarTwo).then((results) => {

Answer 2

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 });
      });
    });
  }