我想使用Facebook API在我的页面上添加Facebook登录。当用户点击使用Facebook登录按钮我希望页面重定向到另一个。为此,我做了以下操作:获取“警告:setState(...):只能更新已安装或正在安装的组件。”设置“FB.Event.subscribe()”函数内部状态时发生错误
componentDidMount() {
window.fbAsyncInit = function() {
FB.init({
appId : '1947842912095857',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.10'
});
FB.AppEvents.logPageView();
FB.getLoginStatus((response) => {
if (response.status === 'connected') {
console.log('Logged in.');
this.setState({ loggedIn: true });
}
else {
}
});
// login callback implementation goes inside the function() { ... } block
FB.Event.subscribe('auth.statusChange', (response) => {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', (response) => {
console.log('Good to see you, ' + response.name + '.');
this.setState({ loggedIn: true });
// if(!this.state.loggedIn){
// }
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}.bind(this);
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
var s = '<div class="fb-login-button" ' +
'data-scope="public_profile,email" data-size="large" ' +
'data-show-faces="false" data-auto-logout-link="true" ' +
'href="javascript:void(0)""></div>';
var div = document.getElementById('social-login-button-facebook')
div.innerHTML = s;
}
首先我初始化Facebook API。然后我打电话FB.getLoginStatus()
看看用户是否已经登录。在回调中,我将this.state.loggedIn
设置为true
,它工作正常。然而,在FB.Event.subscribe()
功能时,我称之为this.setState
功能我得到以下错误:
Warning: setState(...): Can only update a mounted or mounting component.
我试图解决这个问题,我试图解决办法是检查用户是否是不已经登录,然后设置状态。
if(!this.state.loggedIn){
this.setState({ loggedIn: true });
}
然后我摆脱了错误。但我不知道这是为什么。 有没有人知道它为什么可以在FB.getLoginStatus()
中调用this.setState()
,但不在FB.Event.subscribe()
中,以及为什么它只能在用户尚未登录时设置状态?
感谢您花时间阅读本文。
谢谢,这是有道理的。现在我明白了为什么在设置它之前检查状态。 – martin36