react-google-recaptcha v2调用reset后onChange失效持续加载问题

问题根因 #

react-google-recaptcha 组件内部封装了独立的reCAPTCHA实例状态，直接调用window.grecaptcha.reset()是全局重置操作，没有同步组件内部的事件绑定与实例缓存，会导致第二次点击时组件无法正常触发验证请求，出现无限加载的问题。

解决方案 #

1. 改用组件实例的reset方法 #

给ReCAPTCHA组件绑定ref，通过ref调用组件提供的reset方法，保证组件内部状态同步更新：

// 组件挂载时绑定ref
<ReCAPTCHA 
  ref={el => this.captchaRef = el}
  sitekey={KEY} 
  onChange={this.captchaOnChange} 
/>

表单提交完成后替换原有全局重置逻辑：

// 替换 window.grecaptcha.reset()
this.captchaRef.reset()

2. 清理多余的async修饰符 #

当前captchaOnChange函数内部没有异步操作，async修饰符属于冗余配置，可能导致状态更新时序异常，建议移除：

captchaOnChange = (value) => {
  this.setState({
    captchaValue: value,
    clicked: true,
  });
};

3. 同步重置相关状态 #

重置验证码的同时，同步清空业务侧存储的验证码相关状态，避免新旧状态冲突：

// 表单提交成功后执行
this.captchaRef.reset()
this.setState({
  captchaValue: '',
  clicked: false
})

4. 版本适配排查 #

如果上述操作后问题仍然存在，可升级react-google-recaptcha到最新稳定版，旧版本存在已知的实例状态同步缺陷。

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