javascript - 反应：状态的布尔标志更新不够快

Question

我在 if 语句中使用的状态中保留了一个名为 validationPassed 的布尔标志。如果是真的，我允许 axios 请求发生。在此之前，我将 if 语句称为 doValidation()，它有很多 if 语句。如果其中一个失败，我将该布尔标志的状态设置为false. 在 setState() 中，我放置了 console.log 回调，似乎布尔标志已成功设置为 false 但不是立即设置，因为 if(this.state.validationPassed) 在不应该的时候通过了。我知道 React 状态是异步的。尝试使用 prevState 参数来切换布尔值，但它不起作用。我该如何进行这项工作？也许还有另一种方法可以在没有布尔标志的情况下进行验证？

    this.state = {

        validationPassed: true
    }
}

   this.doValidation(usernameFromUser, passwordFromUser)

   if(this.state.validationPassed){

    // axios call
   }

}

doValidation = (username, password) => {

    if(username.trim().length === 0){

          this.setState( {
            validationPassed: false }, () => {console.log(this.state.validationPassed)});
    }

    if(password.trim().length === 0){

          this.setState( {
            validationPassed: false }, () => {console.log(this.state.validationPassed)});
    } 

    if(username.trim().length < 8){

        this.setState( {
            validationPassed: false }, () => {console.log(this.state.validationPassed)});
    }

    if(username.trim().length > 20){

        this.setState( {
            validationPassed: false }, () => {console.log(this.state.validationPassed)});
    }

    if(password.trim().length < 8){

        this.setState( {
            validationPassed: false }, () => {console.log(this.state.validationPassed)});
        } 

    if(new RegExp("^(?!(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,}))").test(password)){

        this.setState( {
            validationPassed: false }, () => {console.log(this.state.validationPassed)});  
    }
}

标签： javascriptreactjsif-statementboolean

Answer 1

尝试使用

阅读react setState 的文档

this.setState(
  (currentStateValue)=> { value: !currentStateValue }, 
  (state)=>{console.log(state)}
)