google recaptcha React js

Question

我有一个问题，谷歌验证码一开始没有在页面中呈现，但是当我提交并且请求将我发送到另一个页面时，我使用浏览器上的返回箭头返回到表单页面，当我重新加载页面时它呈现没有更长的渲染：

这是我的 index.html：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

这是我的组件：

import React, { useState, useRef  } from "react";
import LogoBig from "../../../Assets/LogoBig.png";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import {
  validateEmail,
  validatePassword,
} from "../../../Components/FormValidation";
import { MdKeyboardArrowDown } from "react-icons/md";
import ReCAPTCHA from "react-google-recaptcha";

const UserRegister = () => {
  const [nom, setNom] = useState("");
  const [prenom, setPrenom] = useState("");
  ...
  const [recaptchaValue, setRecaptchaValue] = useState("");

  const handleRecaptcha = (value) => {
    console.log("reCAPTCHA value:", value);
    setRecaptchaValue(value);
  };

  const handleSubmit = async (e) => {
    if (e && typeof e.preventDefault === "function") {
      e.preventDefault();
      const token = recaptchaValue;
      console.log('tokenCaptcha', token)
      recaptchaValue.reset();
    }
    const formData = new URLSearchParams();
    formData.append("nom", nom);
    formData.append("prenom", prenom);
    ...
    formData.append("recaptcha", recaptchaValue);
    formData.append("profile", "Unfinished");

    fetch("http://localhost:5000/register", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: formData,
    })
      .then((res) => res.json())
      .then((data) => {
        if (data !== "Email already in use") {
          console.log("success");
          //window.location.reload();
          //window.location.href = "/confirmation";
        } else {
          if (data === "Email already in use") {
            setRegisterError("Cette adresse e-mail est déjà utilisée");
          } else {
            setError(data);
            console.log(error);
          }
        }
      });
  };
 
    <ReCAPTCHA
      sitekey={"6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"}
      onChange={handleRecaptcha}
              /> 

Answer 1

问题可能与 index.html 文件中 Google reCAPTCHA 脚本标签的异步和延迟属性有关。这些属性允许脚本异步加载并且不会阻止页面其余部分的呈现。但是，这可能会导致某些依赖脚本完全加载的组件出现问题，然后才能正确呈现。

要解决这个问题，您可以尝试从脚本标签中删除 async 和 defer 属性，看看是否可以解决问题：

<script src="https://www.google.com/recaptcha/api.js"></script>

此外，您应该确保您的 ReCAPTCHA 组件中使用的站点密钥与与您的 Google reCAPTCHA 帐户关联的站点密钥匹配。

如果问题仍然存在，您可以尝试使用 onload 事件来检测 Google reCAPTCHA 脚本何时在渲染组件之前完成加载：

const [isRecaptchaReady, setIsRecaptchaReady] = useState(false);

const handleRecaptchaReady = () => {
  setIsRecaptchaReady(true);
};

return (
  <>
    <script src="https://www.google.com/recaptcha/api.js" onload={handleRecaptchaReady}></script>
    {isRecaptchaReady && (
      <ReCAPTCHA
        sitekey={"your_site_key_here"}
        onChange={handleRecaptcha}
      />
    )}
  </>
);