Асинхронизация / ожидание в обработчике событий в реакции

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

Если customerCode изменится во время запроса, это приведет вас в хаос.Вы можете перепроверить customerCode перед обновлением состояния:

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

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

    this.setState({ customer });
}

Answer 2

Я понимаю, что следующий код неверен, потому что я захожу на this.state, чтобы получить код клиента

Что заставляет вас думать, что это неправильно? Это кажется мне законным.
Если вы обновите значение в таком состоянии (мутация), тогда оно может рассматриваться как анти-паттерн, но чтение значений таким образом совершенно нормально.

С учетом вышесказанного, я предпочитаю уничтожать свойства из state или любого другого объекта в верхней части тела функции:

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

Я думаю, что это более читабельно, но оба способа будут работать нормально.

Редактировать

Просто чтобы уточнить, когда я писал, что оба способа будут работать нормально, я имел в виду, как и без деструктуризации. например, первый пример OP и мой пример.

Что касается этого комментария:

this.state может быть устаревшим

В вашем случае это не имеет значения. Единственный раз, когда для setState требуется аргумент средства обновления, это когда следующее состояние зависит от предыдущего состояния, а здесь это не так.