si quiero cargar el captcha haciendo clic en el botón Actualizar, se está cargando, pero cuando navegamos a otra página y hacemos clic en el botón Atrás del navegador, el captcha desaparecerá. Cómo resolver ese problema que cada vez (ya sea que actualice o haga clic en el botón Atrás del navegador) debería mostrarse captcha
import React, { useState } from "react"; import Recaptcha from "react-recaptcha"; export default function DropDown() { const grecaptchaObject = window.grecaptcha; function captchaVerify(response) { if (response !== "") { //some code } else if ((response === "")) { //some code } } function recaptchaLoaded() { } return ( <> <div> <Recaptcha sitekey="Your-Site-Key" render="explicit" onloadCallback={recaptchaLoaded} verifyCallback={captchaVerify} grecaptcha={grecaptchaObject} /> </div> </> ); }Intente deshabilitar <React.StrictMode> en index.js de esta manera:
const root = createRoot(container); root.render( // <React.StrictMode> <App /> // </React.StrictMode> );Tienes que usar el método de reset . De los documentos:
El widget reCAPTCHA se puede restablecer manualmente accediendo a la instancia del componente a través de una referencia de devolución de llamada y llamando a .reset() en la instancia.
var Recaptcha = require('react-recaptcha'); // create a variable to store the component instance let recaptchaInstance; // create a reset function const resetRecaptcha = () => { recaptchaInstance.reset(); }; ReactDOM.render( <div> <Recaptcha ref={e => recaptchaInstance = e} sitekey="xxxxxxxxxxxxxxxxxxxx" /> <button onClick={resetRecaptcha} > Reset </button> </div>, document.getElementById('example') ); Para que esto funcione en cada carga, puede aprovechar el gancho useEffect :
useEffect(() => { recaptchaInstance.reset(); , []);