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

Question

如果我想通过点击刷新按钮来加载验证码，但是当我们导航到另一个页面并点击浏览器后退按钮时，验证码就会消失。如何解决每次（刷新或点击浏览器后退按钮）验证码应该显示的问题

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

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

明确重置 reCAPTCHA 小部件

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

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();
, []);

Answer 2

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

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