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("test@email.com", "password")} />
      )
    }
}

Answer 2

您有几个选择。首先，箭头函数可以是异步的，你只需要将它附加到类的属性：

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

    };
}

以下是Babel REPL中的工作示例。

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

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

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

如何在ReactJS ES2015异步函数中将“this”纳入范围？

2 个答案: