Блог

Редактировать:
я попытался перейти по ссылке ниже, чтобы сбросить recaptcha с помощью recaptchaInstance.reset().
Я добавил constructer(), ref={e => recaptchaInstance = e} вкл. ,
recaptchaInstance.reset() в componentWillMount().

отображается ошибка

   TypeError: Cannot read property 'reset' of undefined
  

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

Первоначальные проблемы:
Когда я запускаю проект через npm, recaptcha показывает правильный язык.

Но когда я меняю язык сайта с помощью changeLanguage(),
язык recaptcha всегда показывает zh_tw.

Я проверил prop hl recaptcha, когда я меняю язык своего сайта, он показывает правильное значение для каждого изменения.
Я попытался обновить страницу, но recaptcha по-прежнему показывает неправильный язык
Похоже, что recaptcha не отображается повторно после окна.location.reload().

Как я могу решить эту проблему и выполнить сброс recaptcha при появлении окна.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.