反应中的事件处理程序中的异步/等待

Question

如何在 react 的事件处理程序中使用 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 第一个示例和我的示例。

至于这条评论：

this.state 可能已过时

在你的情况下没关系。 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 });
}