Я использую кнопку 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 />}