reactjs - 상태를 업데이트하고 약속을 사용하여 내 기능에 몇 가지 문제가

Question

기본적으로, 나는 그들이 내 정규식을 통과하는지 확인하여 양식 필드의 유효성을 검사하고있다면, 나는 '성공'또는 '오류'로 상태를 설정합니다. (반응 부트 스트랩에 의해 사용됨).

기본적으로 실행해야하는 약 6 개의 함수가 있지만 암호 필드 유효성 검사 함수는 많은 문제를 일으 킵니다. ,

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

그러나, 문제가 validatePassword()가 '성공'또는 '오류'중 하나를 setState를하며, 기능부터 순서대로 떨어져 발사하지 않는 것입니다 - 순간에

내 handleSubmit()이 같이 보입니다 나는 보통 validateConfirmPassword()에 대한 잘못된 결과를 얻습니다.

나는 Promises에서 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, 
     }); 
    } 
    }