react useState验证码发送倒计时

1

const mailREG = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;

const [countDown, setCountDown] = useState(0);

useEffect(() => {
  if (countDown) {
    setTimeout(() => {
      setCountDown(count => count - 1);
    }, 1000);
  }
}, [countDown]);

const handleSendVerificationCode = () => {
   //邮箱格式正确
   const mail = mailRef.current;
   if (mail && mailREG.test(mail.value)) {
     setCountDown(60);
   }else console.log("检查邮箱格式");
};

2

const countdownTimer = useRef<any>(0);
const [countdown, setCountdown] = useState(60);

const decreaseCountdown = useCallback(() => {
  countdownTimer.current = setTimeout(() => {
    setCountdown(count => {
      if (count > 1) decreaseCountdown();
      return count - 1;
    });
  }, 1000);
}, []);

useEffect(() => {
  if (showConfirmInput) decreaseCountdown();
  else clearTimeout(countdownTimer.current);
}, [decreaseCountdown, showConfirmInput]);

const handleSendMailCode = () => {
  const email = mail.current?.value;
  if (email) {
    setLoading(true);
    sendMailCode(email).then(msg => {
      setLoading(false);
      if (msg) {
        setShowConfirmInput(true);
        setEncryptedInfo(msg);
      }
    });
  }
};