Удаление кнопки входа в Facebook предотвращает закрытие всплывающего окна - PullRequest
0 голосов
/ 08 января 2020

Я использую кнопку Facebook «Продолжить как» в своем приложении реакции для аутентификации. При нажатии этой кнопки открывается всплывающее окно входа в Facebook, а затем клиент успешно возвращает результаты входа. Затем всплывающее окно исчезает, и я могу начать процесс отправки сведений на сервер для проверки подлинности с помощью моего приложения.

Однако, если я удаляю компонент, содержащий кнопку входа в Facebook, всплывающее окно остается открытым бесконечно долго , пустой, с белым фоном. В Google есть множество результатов по этому признаку, но ни один из них не связан с удалением элемента как с причиной.

Задержка удаления элемента приводит к решению проблемы, однако медленное соединение (дольше чем задержка) все равно приведет к удалению элемента до завершения процесса Facebook.

Кто-нибудь знает, как я могу исправить это правильно? Я совершенно новичок в Facebook SDK, и, если есть лучший метод, пожалуйста, говорите.

Кнопка входа в компонент:

<div
  className="fb-login-button"
  data-width=""
  data-size="large"
  data-button-type="continue_with"
  data-auto-logout-link="false"
  data-use-continue-as="true"
>
</div>

Код, получающий ответ:

import { store } from './stores/store'
const facebookCallback = (response) => {
  if (response.status == 'connected') {
    console.log("Logged in successfully!")
    setTimeout(()=>{
      console.log("Runing dispatch")
      store.dispatch(setLoginStatus(true));
    },1000)
    //store.dispatch(setLoginStatus(true));
  } else {
    console.log("Logged in failed!")
    store.dispatch(setLoginStatus(false));
  }
  return false
}
window.fbAsyncInit = function() {
  FB.init({
    appId: '750335742141550',
    cookie: true,  // enable cookies to allow the server to access the session
    cookie: true, 
    xfbml: false,
    status: true,
    oauth: true,
    version: 'v3.2'
  })
  FB.Event.subscribe('auth.statusChange', function(response) {
    facebookCallback(response)
  })
}.bind(this);

Компонент формы входа отображается / скрывается его родителем следующим образом:

{!this.props.loginState.loggedIn && <LoginForm />}
...