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

当我得到新的当前语言时，我想在状态更改时重新加载reCaptcha小部件

我使用组件更新

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

（this.recaptchaInstance=e）}
sitekey=“使用它只是没有在这里复制它”
size=“正常”
render=“显式”
hl={language.current_lang}
onloadCallback={this.onloadRecaptcha}
/>

---

有人能给我指一下正确的方向吗？谢谢

以这种方式使用的componentDidUpdate将使应用程序的状态不一致和/或不可预测。

---

我建议hl={language.current_lang}应该是hl={state.current_lang}。通过setState（）使用新语言更新状态将使视图使用新值（更新的语言）再次呈现，并将通过（即）react-dev工具保持状态一致、可预测且易于消除错误。

也许您需要重新装载

Recaptcha

，而不仅仅是重新呈现它。您应该使用

键

道具强制重新安装：

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

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

（this.recaptchaInstance=e）}
sitekey=“使用它只是没有在这里复制它”
size=“正常”
render=“显式”
hl={language.current_lang}
onloadCallback={this.onloadRecaptcha}
/>

你确定

语言。重置时，当前语言实际上不同吗？@Chris是的，谢谢！您好，我实际上从redux状态获得了lang，因此它是this.props.language.current_language。这与本地状态相同，通过saga->reducer或直接在reducer中更改redux状态。redux调试器的值使得保持一致性变得更加重要。当你的应用程序增长到足够大的程度时，你会因为处理好状态一致性和可预测性的这些方面而大吃一惊：）这实际上是可行的！一旦系统允许，我们会将其标记为答案，谢谢！很高兴它帮助了你！这将使组件状态不可预测且不可调试。在不影响状态且不被状态更改触发的情况下使用componentDidUpdate将使您失去Redux的一半功能。@MosèRaguzzini Redux？《凤凰社》？克里斯，我也同意你的看法。有时，要应用的简单模式需要检查更多的代码（至少是一个工作片段）。
<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}
/>