Question

如何在反应的事件处理程序中使用async / await？

我了解以下代码是错误的，因为我正在访问this.state以获取客户代码。

<button onClick={handleClick}>Get Customer</button>

async handleClick() {
    let customerCode = this.state.customerCode;
    let customer = await this.service.getCustomer(customerCode);
    this.setState({ customer });
}

也许应该是这样，但我认为这行不通：

handleClick() {
    this.setState(async (prevState) => {
        let customerCode = prevState.customerCode;
        let customer = await this.service.getCustomer(customerCode);
        return { ...prevState, customer };
    }); 
}

Answer 1

我了解以下代码是错误的，因为我正在访问this.state以获取客户代码

是什么让您认为这是错误的？在我看来是合法的。
如果您以这样的状态（变异）更新值，则可以将其视为反模式，但以这种方式读取值就很好。

话虽如此，我更喜欢从state或函数主体顶部的任何其他对象中破坏属性：

async handleClick() {
  const { customerCode } = this.state;
  let customer = await this.service.getCustomer(customerCode);
  this.setState({ customer });
}

我认为它更具可读性，但是两种方法都可以正常工作。

修改

请澄清一下，当我写两种方式都可以正常工作时，我的意思是有和没有破坏。例如OP的第一个示例和我的示例。

至此评论：

此状态可能是陈旧的

对于您而言，这无关紧要。 setState唯一需要更新程序参数的时间是下一个状态取决于上一个状态时，在这种情况下不是这种情况。

Answer 2

如果在查询时customerCode发生了变化，那将使您陷入混乱。您可以在进行状态更新之前重新检查customerCode：

async handleClick() {
    const { customerCode } = this.state;
    const customer = await this.service.getCustomer(customerCode);

    if(customerCode !== this.state.customerCode)
       return;

    this.setState({ customer });
}

在事件处理程序中进行异步/等待

2 个答案: