为什么当我导航到另一个页面时，reCaptcha会消失

Question

如果我想通过点击刷新按钮加载captcha，但当我们导航到另一个页面并点击浏览器返回按钮时，captcha将消失。如何解决每次(刷新或点击浏览器返回按钮(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>
</>
);
}

Answer 1

尝试禁用index.js中的<React.StrictMode>，如下所示：

const root = createRoot(container);
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);

Answer 2

您必须使用reset方法。来自文档：

显式重置reCAPTCHA小部件

reCAPTCHA小部件可以通过回调ref访问组件实例并在实例上调用.reset((来手动重置。

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')
);

要使其在每次加载时都起作用，您可以利用useEffect挂钩：

useEffect(() => {
recaptchaInstance.reset();
, []);