React выдает ошибки CORs при перемещении обратного вызова готовности к повторному вызову - PullRequest
Новая
       4

React выдает ошибки CORs при перемещении обратного вызова готовности к повторному вызову

1 голос
/ 09 января 2020

У меня есть приложение React, созданное с помощью create-Reaction-app. Я помещаю 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 eval, но в данный момент это кажется немного выше моей кривой обучения.

1 Ответ

0 голосов
/ 14 января 2020

Сообщение, которое выдает React, было в основном потому, что я не ловил ошибки и не знал, где искать. Я до сих пор не знаю, почему вызов execute вне ready ведет себя ошибочно, но я думаю, что между вызовом методов, рендерингом и тем, к чему имеет доступ реакция, существует условие гонки. Это строго предположение. Я пока не знаю, как это доказать.

Однако я решил проблему, сделав шаг назад и подумав о своей цели. Вместо того, чтобы разбивать это на несколько методов (мой java мозг мешал), я просто использовал функцию стрелки, чтобы они связывали this область видимости с компонентом. 

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 извлекать данные после завершения данных токена. 

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

fetchRecaptchaData затем вызывает API на моем сервере, чтобы получить данные Google и обновить состояние еще раз.

...