当网站更改语言时,react-recaptcha 不会更新其语言显示

react-recaptcha not update its language display when the sites change language

编辑:
我尝试按照下面的 link 通过 recaptchaInstance.reset().
重置验证码 我添加了 constructor(), ref={e => recaptchaInstance = e} on ,
recaptchaInstance.reset() on componentWillMount().

error shows

  TypeError: Cannot read property 'reset' of undefined

https://www.npmjs.com/package/react-recaptcha

初始问题:
当我 npm 启动项目时,recaptcha 显示正确的语言。

但是当我使用 changeLanguage() 更改网站的语言时,
验证码的语言总是显示 zh_tw.

我检查了 recaptcha 的 prop hl,当我更改我的网站的语言时,它会显示每次更改的正确值。
我尝试刷新页面,但 recaptcha 仍然显示不正确的语言
似乎在 window.location.reload().

之后 recaptcha 不会重新呈现

如何解决此问题并在 window.location.reload() 运行 时重置验证码?

login.jsx

import React from "react";
import Recaptcha from 'react-recaptcha'
...
let recaptchaInstance;

class Login extends Component {

   constructor() { //add after edit
     super();
     this.key = 0;
   }

    state = {
            ...
            recapchaLang: '',
    };


componentWillMount(){
   recaptchaInstance.reset(); //add after edit
   this.setState({
     recapchaLang: localStorage.getItem('currentLang') === 'en' ? 'en' : localStorage.getItem('currentLang') === 'tw'? 'zh-TW':localStorage.getItem('currentLang') === 'cn'?'zh-CN':''
   })
}

    ...
  render(){
         <Recaptcha
             key={this.key} //add after edit
             ref={e => (recaptchaInstance = e)} //add after edit
             sitekey={window.RECAPTCHA_KEY}
             render="explicit"               
             hl = {this.state.recapchaLang}
             verifyCallback = {() =>{this.setState({isVerifiedByRecaptcha:true,showRecaptchaAlert:false})}}
        />
  }
}

FirstPage.jsx

...
  class FirstPage extends Component {
      changeLanguage = (lang) => {
         localStorage.setItem("currentLang", lang);
         i18n.changeLanguage(lang);
         window.location.reload();
      };
      render() {
             ...
            <Login />
           <span onClick={() => this.changeLanguage("zh")}>TW</span>|
            <span onClick={() => this.changeLanguage("cn")}>CN</span>|
            <span onClick={() => this.changeLanguage("en")}>EN</span>
       }

}

问题已解决。
我只是改为使用 react-google-recaptcha 而不是 react-recaptcha。