如何在 ReactJS ES2015 异步函数中"this"范围？

Question

以下是一种在ES2015类中的方法。

它不能是箭头函数，因为它是异步函数。

，但由于它不是箭头函数，因此"此"不在范围中，所以我不能做诸如setstate之类的事情。

有人可以建议我如何将其进入范围吗？谢谢！

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

Answer 1

由于您已经使用了async/await ES7功能，因此您也可以使用属性初始化器语法在范围内自动具有this。它在stage-2 Babel预设中。

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("[e-mail]", "password")} />
      )
    }
}

Answer 2

您有一些选择。首先，箭头函数 can 是异步，您只需要将其连接到类的属性：

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

这是一个在babel repl中工作的示例。

如果要以类似方式保持类声明，则可以在构造函数中使用bind来确保this参考始终绑定到类实例：

constructor() {
    this.doSubmit = this.doSubmit.bind(this);
}
async doSubmit(email_address, password) {
    ...
}