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

Question

我想在我的状态发生变化时重新加载 reCaptcha 小部件，当我获得新的 current_lang。

我用了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 以这种方式使用会使应用程序的状态不一致and/or 更不可预测。 我建议hl={language.current_lang}应该是hl={state.current_lang}。通过 setState() 使用新语言更新状态将使视图再次使用新值（更新的语言）呈现，并将通过（即）反应开发工具保持状态一致、可预测且易于调试。

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}
/>