React项目中ReCAPTCHA v2无法显示的问题求助

问题详情 #

我按npm和Google文档指引，执行npm install --save react-google-recaptcha安装依赖，同时在index.html的body和目标Contact页面里都加了<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>，但ReCAPTCHA始终无法在页面显示。之前它曾在未改代码的情况下短暂出现后消失，重启VSCode和Github Desktop也没用。

补充说明 #

ReCAPTCHA v2曾无理由短暂显示后消失，重启开发相关工具未解决问题。

相关代码 #

Contact.jsx

import React from 'react'
import Stockpic15 from '../img/stockpic15.jpg';
import ReCAPTCHA from "react-google-recaptcha";
import REACT_APP_SITE_KEY from '../.env'

const Contact = () => {
  
  const onChange = () => {

  }

  return (
  <div className=''>  
   <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
    ....
      <div className='w-2/3 pb-5'>
        <img src={Stockpic15} alt="" />
      </div>
        <form className='flex flex-col justify-center items-center sm:space-y-8 mobile:space-y-10 mobile:text-lg tablet:text-2xl'>
          <input className='contact-input' type='text' name='first-name' placeholder='Your First Name' required/>
          <input className='contact-input' type='text' name='last-name' placeholder='Your Last Name' required/>
          <input className='contact-input' type='email' name='email' placeholder='Your Email Address' required/>
          <textarea className='border-black border-2 rounded-md block w-full resize' name="message" rows="4" placeholder='Message'></textarea>
          <button type="submit" href="#_" className="relative inline-block text-lg group">
            ...
          </button>
           <ReCAPTCHA 
          sitekey={REACT_APP_SITE_KEY}
          oncChange={onChange}
          />
      </form>
    </div>
  </div>
  )}

  export default Contact

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
  </body>
</html>

分步解决步骤 #

1. 移除组件内的重复script标签 #

React组件的JSX中不能直接插入<script>标签，这会导致渲染异常。只保留index.html底部的script引用，删除Contact.jsx中的这一行：

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

2. 修正环境变量的使用方式 #

Create React App对环境变量有严格要求：

• 变量名必须以REACT_APP_开头
• 不能直接导入.env文件，需通过process.env访问
• 确保.env文件放在项目根目录（与package.json同级）

修改后的密钥引用：

// 删除这行错误导入：import REACT_APP_SITE_KEY from '../.env'

<ReCAPTCHA 
  sitekey={process.env.REACT_APP_SITE_KEY}
  onChange={onChange}
/>

3. 修复组件属性拼写错误 #

ReCAPTCHA组件的回调属性是onChange，你代码中写成了oncChange，这会导致组件无法正常触发回调并初始化。修正拼写即可。

4. 验证站点密钥有效性 #

• 登录Google ReCAPTCHA控制台，确认使用的是v2类型的站点密钥
• 将本地开发域名（如localhost:3000）添加到密钥的允许域名列表中

5. 清除缓存并重启服务 #

• 停止当前开发服务，执行npm start重启
• 用Ctrl+Shift+R强制刷新浏览器，清除旧缓存资源

内容的提问来源于stack exchange，提问作者Jeremiah