javascript - how to force reload of react-recaptcha on state change (language update) - Stack Overflow

admin管理员组

文章数量:1022956

I want to reload reCaptcha widget on my state change, when I get new current_lang.

I used ponentDidUpdate

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

which looks like it re-render ponent, but language stays the same?

this is my ponent

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

Can someone please point me in right direction? Thanks!

I want to reload reCaptcha widget on my state change, when I get new current_lang.

I used ponentDidUpdate

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

which looks like it re-render ponent, but language stays the same?

this is my ponent

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

Can someone please point me in right direction? Thanks!

• javascript
• reactjs
• recaptcha

Share Improve this question Follow edited Aug 1, 2018 at 14:19 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Aug 1, 2018 at 14:17 Nemanja SrećkovićNemanja Srećković 35955 silver badges1818 bronze badges 2

• are you sure language.current_lang is actually different when you do the reset? – Chris Commented Aug 1, 2018 at 14:21
• @Chris yes I am, thanks! – Nemanja Srećković Commented Aug 1, 2018 at 14:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Perhaps you need to re-mount Recaptcha rather than just re-rendering it. You should use the key prop to force a re-mount:

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

ponentDidUpdate() {
  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}
/>

ponentDidUpdate used in this way will make the state of the application inconsistent and/or less predictable. I suggest that hl={language.current_lang} should be hl={state.current_lang}. Updating the state with a new language through setState() will make the view to render again with new values (updated language) and will keep state consistent, predictable and easily debbugable through (I.E.) react dev tools.

I want to reload reCaptcha widget on my state change, when I get new current_lang.

I used ponentDidUpdate

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

which looks like it re-render ponent, but language stays the same?

this is my ponent

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

Can someone please point me in right direction? Thanks!

I want to reload reCaptcha widget on my state change, when I get new current_lang.

I used ponentDidUpdate

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

which looks like it re-render ponent, but language stays the same?

this is my ponent

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

Can someone please point me in right direction? Thanks!

• javascript
• reactjs
• recaptcha

Share Improve this question Follow edited Aug 1, 2018 at 14:19 Tholle 113k2222 gold badges208208 silver badges197197 bronze badges asked Aug 1, 2018 at 14:17 Nemanja SrećkovićNemanja Srećković 35955 silver badges1818 bronze badges 2

• are you sure language.current_lang is actually different when you do the reset? – Chris Commented Aug 1, 2018 at 14:21
• @Chris yes I am, thanks! – Nemanja Srećković Commented Aug 1, 2018 at 14:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Perhaps you need to re-mount Recaptcha rather than just re-rendering it. You should use the key prop to force a re-mount:

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

ponentDidUpdate() {
  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}
/>

ponentDidUpdate used in this way will make the state of the application inconsistent and/or less predictable. I suggest that hl={language.current_lang} should be hl={state.current_lang}. Updating the state with a new language through setState() will make the view to render again with new values (updated language) and will keep state consistent, predictable and easily debbugable through (I.E.) react dev tools.

本文标签： javascripthow to force reload of reactrecaptcha on state change (language update)Stack Overflow