gpt4 book ai didi

javascript - 在 "Warning: setState(...): Can only update a mounted or mounting component."函数中设置状态时出现 "FB.Event.subscribe()"错误

转载 作者:行者123 更新时间:2023-11-30 21:17:26 24 4
gpt4 key购买 nike

我正在尝试使用 Facebook API 在我的页面上添加 Facebook 登录。当用户单击 Login with Facebook 按钮时,我希望页面重定向到另一个页面。为此,我做了以下工作:

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() 中不行以及为什么只有在用户尚未登录时才设置状态?

感谢您花时间阅读本文。

最佳答案

这与请求的异步性质有关。虽然组件可能会在某个时刻挂载,但如果有待处理的请求在组件卸载后才完成,那么您将尝试在未挂载的组件上 setState

例如:

class LoginComponent extends Component {

componentWillMount() {
// This request will happen whenever the component mounts
Request.get('/login-token').then(() => {
dispatch({type: SET_TOKEN, token: 'blah blah'});

// Whoops, what if there was already a login token
// and the user was redirected? This will attempt to set
// state on a component that has been unmounted due to redirect
this.setState({loggedIn: true});
});
}

componentWillReceiveProps(props) {
// This will only redirect if there is already a token
if (props.token) {
browserHistory.push('/some-logged-in-page');
}
}

render() {
return (
// ...
);
}
}

在此示例中,请求将在每次安装组件时尝试获取 token 。但是我们正在检查 token 是否通过 props 传入,并可能进行重定向。由于请求的异步性质,如果有一个 token 传入,并且用户被重定向,请求仍然会完成并尝试 setState,但是组件已经被卸载到那时。

看看这个 react blog post其中讨论了处理异步请求的问题,并提出了在 componentWillUnmount 中安全取消请求的方法。

关于javascript - 在 "Warning: setState(...): Can only update a mounted or mounting component."函数中设置状态时出现 "FB.Event.subscribe()"错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45536031/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com