Question

const PERMITTED_NUMBER_OF_VERIFICATION_ATTEMPTS = 3
const {
  isLoading: isVerificationLoading, 
  isSucceeded: isVerificationSucceeded, 
  isFailed: isVerificationFailed, 
  error: verificationError,
  numberOfAttempts: numberOfVerificationAttempts
} = useSelector(state => state.authentication.verifyPasswordResetCode)

useEffect(() => {
  if (isVerificationCaptchaRendered && isVerificationCaptchaVerified) {
      console.log('Request has been sent #1')
      dispatch(verifyPasswordResetCode(oobCode))
  } 

  if (numberOfVerificationAttempts < PERMITTED_NUMBER_OF_VERIFICATION_ATTEMPTS) {
    console.log('Request has been sent #2')
    dispatch(verifyPasswordResetCode(oobCode))
  }
}, [dispatch, oobCode, numberOfVerificationAttempts, isVerificationCaptchaRendered, isVerificationCaptchaVerified])

useEffect(() => {
  // If the users try to verify the code as many as PERMITTED_NUMBER_OF_ATTEMPTS, render captcha and and set setIsVerificationCaptchaRendered to true.
  if (numberOfVerificationAttempts >= PERMITTED_NUMBER_OF_VERIFICATION_ATTEMPTS && isVerificationCaptchaLoaded && !isVerificationCaptchaRendered) {
    verificationCaptchaInstance.renderExplicitly()
    setIsVerificationCaptchaRendered(true)
  }

  // Everytime numberOfVerificationAttempts increases reset the captcha and set setIsVerificationCaptchaVerified to false.
  if (isVerificationCaptchaRendered) {
    verificationCaptchaInstance.reset()
    setIsVerificationCaptchaVerified(false)
  }
}, [verificationCaptchaInstance, numberOfVerificationAttempts, isVerificationCaptchaLoaded, isVerificationCaptchaRendered])

我的应用程序中有一个页面，用户单击链接即可访问。此链接是密码重置链接。用户访问此页面后，就会发出网络请求，以验证验证链接/重置代码/ oobCode是否有效。如果有效，请显示一个表格以重置密码。如果不是，则显示一条错误消息，指示链接无效。

直到这一刻，一切都可以正常工作！虽然，我想在此页面中实现reCaptcha以防止滥用它。因此，每次用户打开此页面时，我都会递增numberOfVerificationAttempts。如果它高于PERMITTED_NUMBER_OF_VERIFICATION_ATTEMPTS，我想显示reCaptcha。

第二个useEffect正常工作。如果用户超出限制，我将渲染验证码并指示其处于一种状态，并且每次用户刷新页面时，我都会重置验证码。

问题出在第一个useEffect上。基本上，用户可以发出多达PERMITTED_NUMBER_OF_VERIFICATION_ATTEMPTS（＃2）个密码验证请求。如果numberOfVerificationAttempts超出限制，则用户可以验证验证码（＃1）进行请求。

但是，每次我分发verifyPasswordResetCode(oobCode)时，它都会在redux中递增numberOfVerificationAttempts，这会导致useEffect重新渲染，从而导致无限循环多达PERMITTED_NUMBER_OF_VERIFICATION_ATTEMPTS。我不希望这种情况发生。我需要下一次停下来。如果我从依赖项数组中删除numberOfVerificationAttempts，一切正常，我不再有任何问题，但我不应该撒谎useEffect。我应该用某种逻辑弄清楚，但我不知道怎么做。

通过我尝试做这样的事情

if (isVerificationCaptchaRendered) {
  if (isVerificationCaptchaVerified) {
    console.log('Request has been sent #1')
    dispatch(verifyPasswordResetCode(oobCode))
  }
} else {
  if (numberOfVerificationAttempts < PERMITTED_NUMBER_OF_VERIFICATION_ATTEMPTS) {
    console.log('Request has been sent #2')
    dispatch(verifyPasswordResetCode(oobCode))
  }
}

即使useEffect呈现，因为isVerificationCaptchaRendered为true并且isVerificationCaptchaVerified为false。不会再提出其他要求。但是，我在第二个useEffect中设置了isVerificationCaptchaRendered，它还没有准备好（或设置为true）。因此，该if语句也不起作用。

我希望我能够解释这个问题。让我知道您是否没有得到任何帮助。

useEffect的依赖关系数组会导致多次运行

0 个答案: