Javascript reactjs-我的函数在更新状态和使用承诺方面存在一些问题

基本上，我通过检查表单字段是否通过我的正则表达式来验证表单字段，如果通过了，我将使用“success”或“error”（由react引导程序使用）来设置状态

基本上，我有6个需要执行的函数，但是密码字段验证函数给我带来了很多麻烦

我的

handleSubmit（）

目前看起来像这样-

handleSubmit() {
  this.validate1();
  this.validate2();
  // ...
  this.validatePassword();
  this.validateConfirmPassword();
}

但是，问题是

validatePassword（）

将设置状态为“success”或“error”，并且由于函数没有按顺序启动，我通常会得到错误的

validateConfirmPassword（）

结果

我正在阅读有关承诺的mozilla页面，但我真的很困惑，不知道如何在我的代码中应用它

我可以做一些类似于

Promise.all（[除了\u validateConfirmPassword之外的所有东西]）的事情吗？然后（validateConfirmPassword（））

但这似乎不对

validatePassword(pass) {
    if (pass.length >= 8) {
      if (checkPass.test(pass)) {
        this.setState({
          passValidation: validation.success
        });
      } else {
        this.setState({
          passValidation: validation.error
        });
      }
    } else {
      this.setState({
        passValidation: validation.error
      });
    }
  }

validateConfirmPassword(pass, confirmPass) {
    const matches = pass === confirmPass;
    if (matches && this.state.passValidation === validation.success) {
      this.setState({
        confirmPassValidation: validation.success
      });
    } else {
      this.setState({
        confirmPassValidation: validation.error
      });
    }
  }

---

您可以通过以下方式使用React的

componentDidUpdate

解决此问题：

componentDidUpdate() {
  if (this.state.canCheckConfirmPwd) {
    this.validateConfirmPassword();
  }
}

validatePassword(pass) {
if (pass.length >= 8) {
  if (checkPass.test(pass)) {
    this.setState({
      passValidation: validation.success,
      canCheckConfirmPwd: true, // on next update we'll trigger validateConfirmPassword()
    });
  } else {
    this.setState({
      passValidation: validation.error
    });
  }
} else {
  this.setState({
    passValidation: validation.error
  });
  }
}

validateConfirmPassword(pass, confirmPass) {
    const matches = pass === confirmPass;
    if (matches && this.state.passValidation === validation.success) {
      this.setState({
        confirmPassValidation: validation.success,
        canCheckConfirmPwd: false, // to avoid retriggering the function on next update
      });
    } else {
      this.setState({
        confirmPassValidation: validation.error,
        canCheckConfirmPwd: false,
      });
    }
  }

---

这些函数是异步的吗？您好。是的-现在都是，但我想知道如何在

validatePassword（）

之后启动

validateConfirmPassword（）

…你确定吗？根据某些正则表达式检查字符串不是异步的。除非您正在与服务器交谈并等待响应，否则您并不真正需要承诺。对不起。我不是在和服务器说话，只是在运行正则表达式检查。请允许我用这两个函数更新我的问题。您的

validatePassword

是否有

this.setState

方法？谢谢。不幸的是，我出现了一个代码错误，这100%是我的错：（很抱歉，这个答案再次强制OP在其组件中过度使用状态。理想情况下，您应该尽可能减少状态。请查看以帮助理解原因。那么，有什么更好的方法可以做到这一点？我愿意接受建议！）我个人会在州里只放两个字段，

validFields

和

invalidFields

。它们中的每一个都是字符串数组。然后在componentDidUpdate中，您可以使用类似于

的检查来代替当前检查
（this.state.validFields.includes（'password'）&&！this.state.validFields.includes（'confirmPassword'）&&！this.state.validFields.includes（'confirmPassword'）&&&！this.state.invalidFields.includes（'confirmPassword'））
）。这样做的目的是，您知道，如果密码不在
validFields
中，并且不在
invalidFields
中，而密码实际上在
validFields
中，您仍然必须检查confirmPassword。