异步函数

Question

我有以下异步函数用于通过REST服务验证有效的用户凭据;

async doesLoginExist(regCode) {
    if (loginCode.match(loginCodePattern)) {
      try {
        await LoginService.getUserByLoginCode();
        return {};
      } catch (err) {
        if (err.status === 404) {
          return {
            error: 'Your login code is not recognized.', success: null
          };
        }
        return {
          error: 'Service is temporarily unavailable.', success: null
        };
      }
    }
    return {};
  }

但是，当我尝试在此函数中设置某个状态时;

async doesLoginExist(regCode) {
    await this.setState({ canProceed: false });
    if (loginCode.match(loginCodePattern)) {
      try {
        await LoginService.getUserByLoginCode();
        await this.setState({ canProceed: true });
        return {};
      } catch (err) {
        if (err.status === 404) {
          return {
            error: 'Your login code is not recognized.', success: null
          };
        }
        return {
          error: 'Service is temporarily unavailable.', success: null
        };
      }
    }
    return {};
  }

它似乎不再正确地将我的{error，success}对象返回给调用者，最终被用作屏幕上显示的验证消息。另一个小问题是文本框输入上的autoFocus，输入的登录代码也不起作用。

我是否应该在此功能中设置状态？

Answer 1

1. 确保doesLoginExist正确绑定到组件的上下文。由于缺乏信息，无法肯定地说，但这是非常常见的问题。 Read more here 示例如何绑定constructor() { super(); this.doesLoginExist = this.doesLoginExist.bind(this); } async doesLoginExist() { this.setState({ canProceed: false }); ... } 本身 - 您必须在构造函数中明确地执行它

   this.setState

2. 可选择通过从doesLoginExist提取doesLoginExist来调用 - 重构为另一种方法，它会增加handleSomethingHappened = () => { this.setState({ canProceed: false }); const result = await doesLoginExist(regCode) this.setState({ canProceed: true }); }

   的可重用性

   {{1}}

干杯。