reactjs - 我的函數有一些問題來更新狀態和使用承諾

Question

基本上，我通過檢查他們是否通過我的正則表達式驗證表單字段，如果他們這樣做，我設置狀態爲'成功'或'錯誤' （由react-bootstrap使用）。

所以基本上，我有大約6個需要執行的函數，但是，密碼字段驗證函數給我帶來了很多麻煩。

我handleSubmit()目前看起來是這樣的 -

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

然而，問題是，validatePassword()將SETSTATE是「成功」或「錯誤」，並且由於功能爲了不燒了，我通常得到validateConfirmPassword()的錯誤結果。

我正在閱讀Promise上的mozilla頁面，但是我非常困惑，不確定如何在我的代碼中應用該頁面。

我可以做類似Promise.all([everything_except_validateConfirmPassword]).then(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 
     }); 
    } 
    } 

Answer 1

可以使用陣營的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, 
     }); 
    } 
    }