即使反应验证码不起作用，也会发生超时错误

Question

import React, { LegacyRef, useCallback, useEffect } from 'react';
import { Button, Card, Col, Dropdown, Form, Modal, Row } from "react-bootstrap";
import Header from '../common/Header';
import Footer from '../common/Footer';
import useDocument from '../../hooks/useDocument';
import { properties } from '../../common/commonConstants';
import ReCAPTCHA from 'react-google-recaptcha';
import Recaptcha from 'react-recaptcha';
// import Recaptcha from 'react-recaptcha';
import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';

const DocumentView : React.FC = () =>{

  const [documentId, setDocumentId] = React.useState(""); 
  const [showCaptcha, setShowCaptcha] = React.useState(false); 
  const [captchaCount, setCaptchaCount] = React.useState(0); 
  const [captchaVerified, setCaptchaVerified] = React.useState(true); 

  // const getDocument = useDocument(documentId);

  const previewDocument = () =>{
    // useDocument(documentId);
    console.log(captchaCount);
    setCaptchaCount(prevCaptchaCount => prevCaptchaCount + 1);
    if(captchaCount > 4){
      setShowCaptcha(true);
    }
  };


  const recaptchaLoaded = ()=>{};

  // const recaptchaRef:LegacyRef<any> = React.createRef();
  const recaptchaRef:React.RefObject<any> = React.createRef();

  const captchaOnChange = useCallback((response: any) => {
    // Handle the reCAPTCHA response value here

    try{
      if(response){
        setCaptchaVerified(true);
        setShowCaptcha(false);
        setCaptchaCount(0);
        console.log('reCAPTCHA value:Success'+ response);
      } else{
        setCaptchaVerified(false);
        console.log('reCAPTCHA value:False' + response);
      }
    } catch (error){
      console.log(error);
    }

  },[]);


  const handleValChange = (e:any) =>{
    setDocumentId(e.target.value);
  }

    return (

      <ErrorBoundary>
        <div>
            <Header headerName='logo'/>
            <div className="modal-center">
            <Card className="center-body">
                <div className="logo">
logo
                </div>
                <div className="text-center">
                </div>
              <Card.Body>

                <hr />
                <div className="mb-3 fw-bold">
                <Row className='mt-5 ms-2'>
                            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
                            <Form.Label>Document Id</Form.Label>
                            <Form.Control type="text" placeholder="123456" onChange={handleValChange}/>  
                            </Form.Group>
                        </Row>
                </div>

               

                {showCaptcha && 

                  <ReCAPTCHA
                  ref={recaptchaRef}
                  sitekey= {properties.captchaSiteKey}
                  onChange={captchaOnChange}
                  onExpired={() => {
                    recaptchaRef.current.reset(); 
                  }}
                  
                   />}

                {!showCaptcha && <div className="d-grid btn-preview">
                  <Button variant='dark'
                    onClick={() =>previewDocument()}
                  >
                    Preview
                  </Button>
                </div>}
  
               
              </Card.Body>
            </Card>
            </div>
            <Footer/>
        </div>
      </ErrorBoundary>
        
        
    )
}

export default DocumentView;

这是我的代码。如何避免验证码工作后发生超时问题。在这里，我可以在发生超时错误时关闭它，然后它会一直工作，直到下一次超时发生。 无论如何，它是为了避免这个错误或处理这个错误吗？

我尝试使用 ErrorBoundary 类，但它也无法捕获这些错误？

工作顺利，没有错误是我的期望

Answer 1

对我来说，错误几乎肯定是由于重新渲染造成的。我会看到 ReCaptcha 框“闪烁”，我知道它会崩溃。以下解决方案适用于我的 React 应用程序。我停止使用 useState （导致重新渲染）并开始使用 useRef。 （不会导致重新渲染）

   const captcha = useRef<boolean>(false);
   const onChange = (value: any) => captcha.current = !captcha.current;

   }
   
   <form>
   
   <ReCAPTCHA sitekey={SITE_KEY} onChange={onChange} />
   
   </form>