Question

当我获得新的current_lang时，我想在状态更改时重新加载reCaptcha小部件。

我使用了componentDidUpdate

componentDidUpdate() {
  if (this.recaptchaInstance) {
    this.recaptchaInstance.reset();
  }
}

看起来像它重新渲染了组件，但是语言保持不变？

这是我的组成部分

<Recaptcha
  ref={e => (this.recaptchaInstance = e)}
  sitekey="using_it_just_didnt_copy_it_here"
  size="normal"
  render="explicit"
  hl={language.current_lang}
  onloadCallback={this.onloadRecaptcha}
/>

有人可以指出正确的方向吗？谢谢！

Answer 1

以这种方式使用的

componentDidUpdate将使应用程序的状态不一致和/或难以预测。我建议hl = {language.current_lang}应该是hl = {state.current_lang}。通过setState（）使用新语言更新状态，将使视图再次使用新值（更新的语言）进行呈现，并通过React开发工具保持状态的一致性，可预测性和可调试性。

Answer 2

也许您需要重新安装Recaptcha而不是仅仅重新渲染它。您应该使用key道具来强制重新安装：

constructor() {
  super();
  this.key = 0;
}

componentDidUpdate() {
  if (this.recaptchaInstance) {
    this.key++; 
  }
}

<Recaptcha
  key={this.key}
  ref={e => (this.recaptchaInstance = e)}
  sitekey="using_it_just_didnt_copy_it_here"
  size="normal"
  render="explicit"
  hl={language.current_lang}
  onloadCallback={this.onloadRecaptcha}
/>

如何在状态更改时强制重新加载react-recaptcha（语言更新）

2 个答案: