React在准备重新捕获的回调时抛出CORs错误

Question

我有一个使用create-react-app创建的React应用。我把reCaptcha放在上面，放在下面，一切都很棒。令牌回来了，我可以嵌套获取并继续我的生活。

componentDidMount(){
  if(!this.state.isRecaptchaReady){
       window.grecaptcha.ready(function(){
         window.grecaptcha.execute('id', {action: 'homepage'})
        .then(//...)
    });
  } 
}

除了我不能，因为我知道必须有更好的方法。我想获取令牌并存储它，然后从该令牌中调用一个函数，而不是嵌套那么深，以至于我无法得到this来挽救生命（我是说我可以但不想使用一堆绑定）。

requestRecaptchToken = () => {
    console.log(window.grecaptcha);
    //const tokenPromise = window.grecaptcha.execute('id', {action: 'homepage'});
  }

  handleRecaptchToken = data => {
    const { modal } = this.state;
    modal.recaptcha = JSON.parse(data);
    this.setState({modal});
  }

  componentDidMount(){
    if(!this.state.isRecaptchaReady){
      window.grecaptcha.ready(this.handleRecaptchReady());
    } 
  }

componentDidUpdate(){
  if(this.state.isRecaptchaReady){
    this.requestRecaptchToken();
  }
}

此行

const tokenPromise = window.grecaptcha.execute('id', {action: 'homepage'});

之外

window.grecaptcha.ready()

和]炸毁>

错误：引发了跨域错误。 React不能访问开发中的实际错误对象。有关更多信息，请参见https://reactjs.org/docs/cross-origin-errors.html。

问题是没有意义的，我阅读了一些WebPack评估资料，但目前看来这有点超出我的学习范围。

我有一个使用create-react-app创建的React应用。我把reCaptcha放在上面，放在下面，一切都很棒。令牌再次出现，我可以嵌套获取并继续我的生活。 ...

Answer 1

React抛出的消息主要是因为我没有发现错误，也不知道在哪里看。我仍然不知道为什么在execute之外调用ready的行为会出错，但是我认为在调用方法，渲染器和反应可以访问的对象之间存在竞争条件。严格来说，这是猜测，我还不知道如何证明。