Recaptcha 最初没有出现在 React Form 中

Question

我在我的 React 项目中遇到了一个问题，我想在表单末尾包含的 Google reCaptcha 最初没有出现。如果刷新网页，它会按预期显示，但如果用户通过网站自然地导航到该表单，则会丢失该表单并且无法完成该表单。

即使像这样将代码剥离到最低限度，在刷新页面之前 recaptcha 也不会出现：

import React, { useRef } from "react"
import ReCAPTCHA from "react-google-recaptcha"

const RecaptchaTest = () => {
  const captchaRef = useRef(null)
  return (
    <div>
      <ReCAPTCHA
        sitekey={process.env.GATSBY_RECAPTCHA_SITE_KEY}
        ref={captchaRef}
      />
    </div>
  )
}

export default RecaptchaTest

我认为这个问题可能与未及时生成适当的google cookie有关，但尚未找到合适的解决方案。它可能与 react-google-recaptcha 包有关吗？任何帮助或建议将不胜感激。我的网站是使用 Gatsby 构建的。

Answer 1

一个解决方案是您可以尝试 onloadCallBack 属性，它只会在加载 reCAPTCHA 后触发

ref={captchaRef}
 onloadCallback={() => 
{ console.log("reCAPTCHA loaded successfully") }} />