javascript - 当移动重新捕获就绪回调时，React 会抛出 COR 错误

Question

我有一个使用 create-react-app 创建的 React 应用程序。我将 reCaptcha 放在上面，然后放入下面，一切都很好。 token 回来了，我可以嵌套一个获取并继续我的生活。

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

但我不能，因为我知道必须有更好的方法。我想获取 token 并存储它，然后调用一个函数，而不是嵌套得太深，我无法得到 this 来拯救我的生命(我的意思是我可以，但不想用一堆绑定(bind))。

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()

爆炸

Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/docs/cross-origin-errors.html for more information.

问题是它没有意义，我读了一些 WebPack eval 的东西，但这似乎有点超出了我目前的学习曲线。

Answer 1

React 抛出的消息主要是因为我没有捕获错误并且它不知道在哪里查找。我仍然不知道为什么在 ready 之外调用 execute 会出现错误，但我认为调用方法、渲染和 React 可以访问的内容之间存在竞争条件。这完全是猜测，我还不知道如何证明它。

然而，在退一步思考我的目标后，我确实解决了这个问题。我没有将其分解为多个方法(我的 java 大脑妨碍了)，而是简单地使用箭头函数将 this 作用域绑定(bind)到组件。

try {
  window.grecaptcha.ready(() => {
    window.grecaptcha.execute(process.env.REACT_APP_RECAPTCHA_ID).then(data => {
      this.handleRecaptchToken(data);
    });
  });
} catch(e) {
  console.log("reCaptcha token load error: " + e);
}

由于 setState 可以采用可选回调方法作为第二个参数，因此 handleRecaptchToken 可以在 token 数据完成后获取数据。

handleRecaptchToken = data => {
  this.setState({"recaptchaToken" : data}, this.fetchRecaptchaData);
}

fetchRecaptchaData 然后对我的服务器进行 api 调用以获取 google 数据并再次更新状态。