React Google Recaptcha中executeRecaptcha函数未定义问题求助

针对你遇到的executeRecaptcha未初始化完成就调用导致返回undefined的问题，这里有几种稳定的解决方案：

方法1：状态监听+Promise等待就绪 #

通过状态监听executeRecaptcha的初始化状态，封装等待函数确保验证码逻辑在就绪后执行：

import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

export const useAxiosClient = () => {
  const navigate = useNavigate();
  const { executeRecaptcha } = useGoogleReCaptcha();
  const [recaptchaReady, setRecaptchaReady] = useState(false);

  // 监听executeRecaptcha变化，初始化完成后标记就绪
  useEffect(() => {
    if (executeRecaptcha) {
      setRecaptchaReady(true);
    }
  }, [executeRecaptcha]);

  // 等待recaptcha就绪的工具函数
  const waitForRecaptchaReady = () => {
    return new Promise(resolve => {
      if (recaptchaReady) {
        resolve(true);
      } else {
        const interval = setInterval(() => {
          if (recaptchaReady) {
            clearInterval(interval);
            resolve(true);
          }
        }, 100);
      }
    });
  };

  const getCaptchaToken = async (action: string) => {
    await waitForRecaptchaReady();
    return await executeRecaptcha(action);
  };

  const loginBefore = async () => {
    const captchaToken = await getCaptchaToken('login');
    // 后续业务逻辑
  };

  return { loginBefore };
};

方法2：直接在getCaptchaToken中循环等待 #

如果不想额外维护状态，可以直接在令牌获取函数中循环判断，直到executeRecaptcha可用：

import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
import { useNavigate } from 'react-router-dom';

export const useAxiosClient = () => {
  const navigate = useNavigate();
  const { executeRecaptcha } = useGoogleReCaptcha();

  const getCaptchaToken = async (action: string) => {
    // 循环等待直到executeRecaptcha初始化完成
    while (!executeRecaptcha) {
      await new Promise(resolve => setTimeout(resolve, 100));
    }
    return await executeRecaptcha(action);
  };

  const loginBefore = async () => {
    const captchaToken = await getCaptchaToken('login');
    // 后续业务逻辑
  };

  return { loginBefore };
};

方法3：组件层面控制调用时机 #

在调用loginBefore的组件中，先判断recaptcha是否就绪，避免提前触发：

// useAxiosClient.tsx
import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

export const useAxiosClient = () => {
  const navigate = useNavigate();
  const { executeRecaptcha } = useGoogleReCaptcha();
  const [isRecaptchaReady, setIsRecaptchaReady] = useState(false);

  useEffect(() => {
    setIsRecaptchaReady(!!executeRecaptcha);
  }, [executeRecaptcha]);

  const getCaptchaToken = async (action: string) => {
    return await executeRecaptcha(action);
  };

  const loginBefore = async () => {
    const captchaToken = await getCaptchaToken('login');
    // 后续业务逻辑
  };

  return { loginBefore, isRecaptchaReady };
};

// 调用组件示例
import { useAxiosClient } from './useAxiosClient';

const LoginComponent = () => {
  const { loginBefore, isRecaptchaReady } = useAxiosClient();

  return (
    <button 
      onClick={loginBefore} 
      disabled={!isRecaptchaReady}
    >
      {isRecaptchaReady ? '登录' : '验证码加载中...'}
    </button>
  );
};

以上方法均能替代不稳定的延迟调用，确保executeRecaptcha初始化完成后再获取验证码令牌。

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