How can I get "this" into scope in a ReactJS ES2015 async function?

Question

Below is a method that is within an ES2015 class.

It cannot be an arrow function because it is an async function.

But since it is not an arrow function, "this" is not in scope so I cannot do things like setstate.

Can someone please suggest how I can get this into scope? thanks!

  async doSubmit(email_address, password) {
    this.setState({isSubmitting: true, error: null})
    try {
      let data = await this.props.app.server.doSignIn(email_address, password)
    } catch (jqXHR) {
      let errorType = (jqXHR.status >= 400 && jqXHR.status < 500) ? 'application' : 'system'
      let errorMessage = (errorType === 'application') ? jqXHR.responseJSON.description : jqXHR.error
      this.setState({error: errorMessage, isSubmitting: false})

    }
    // following a signin event make sure the user image changes
    this.props.app.reloadProfileImages()
    try {
      await this.props.app.initializeClouds()
    } catch (err) {
      xog('err', err)
      this.setState({error: errorMessage, isSubmitting: false})
    }
    this.postSignIn(data)
  }

Arrow functions can be async too. const doSubmit = async (email_address, password) => { ... } — CodingIntrigue
– CodingIntrigue, Commented Dec 5, 2016 at 8:19
@CodingIntrigue could you please point me to some defintive reference to confirm this? Everything I have understood so far says "no async arrow functions". — Duke Dougal
– Duke Dougal, Commented Dec 5, 2016 at 8:27
Sure, here is the spec which calls out the syntax for use with an arrow: tc39.github.io/ecmascript-asyncawait/#prod-AsyncArrowFunction — CodingIntrigue
– CodingIntrigue, Commented Dec 5, 2016 at 8:31
Could you just put this into a local variable? e.g. var _this = this; — qxz
– qxz, Commented Dec 5, 2016 at 8:33
@qxz That's difficult within a class situation because you would need to store it outside of the scope of doStuff, but still allow it to have access — CodingIntrigue
– CodingIntrigue, Commented Dec 5, 2016 at 8:35

Przemysław Zalewski · Accepted Answer · 2016-12-05 08:57:47Z

2

As you already use async/await ES7 feature you can also use property initializer syntax to automatically have this in scope. It's in the stage-2 Babel preset.

class Example extends React.Component {
    doSubmit = async (email_address, password) => {
        this.setState({isSubmitting: true, error: null})
        try {
          let data = await this.props.app.server.doSignIn(email_address, password)
        } catch (jqXHR) {
          let errorType = (jqXHR.status >= 400 && jqXHR.status < 500) ? 'application' : 'system'
          let errorMessage = (errorType === 'application') ? jqXHR.responseJSON.description : jqXHR.error
          this.setState({error: errorMessage, isSubmitting: false})
        }
        ...
    }

    render() {
      return (
        <button onClick={this.doSubmit("[email protected]", "password")} />
      )
    }
}

answered Dec 5, 2016 at 8:57

Przemysław Zalewski

4,0261 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Felix Kling Over a year ago

FYI async/await is not part of ES7 (ES2016). It will part of ES2017.

Przemysław Zalewski Over a year ago

Thanks. I think it's time for me to switch naming to yearly in order to avoid off by one errors ;)

CodingIntrigue · Accepted Answer · 2016-12-05 10:18:55Z

0

You've got a few options. Firstly, arrow functions can be async, you just need to attach it to a property of the class:

constructor() {
    this.doSubmit = async (email_address, password) => {

    };
}

Here's an example of that working in the Babel REPL.

If you want to keep the class declaration the way it is, you can use bind within the constructor to ensure the this reference is always bound to the class instance:

constructor() {
    this.doSubmit = this.doSubmit.bind(this);
}

async doSubmit(email_address, password) {
    ...
}

edited Dec 5, 2016 at 10:18

answered Dec 5, 2016 at 8:31

CodingIntrigue

79k32 gold badges176 silver badges178 bronze badges

2 Comments

Duke Dougal Over a year ago

Should there be the async keyword in the above example?

CodingIntrigue Over a year ago

@DukeDougal Oops! Kind of the main point of the answer and I omitted it :) Fixed.

Collectives™ on Stack Overflow

How can I get "this" into scope in a ReactJS ES2015 async function?

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related