单击按钮时,显示以下错误。
FB.login()在FB.init()之前调用。
我做错了什么?我发现在互联网上,大多数人也是这样做的,不是吗?我应该在componentWillMount中初始化SDK吗?
这是代码......
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Radium from 'radium';
import { facebook } from '../../constants/config';
class FacebookLogin extends Component {
constructor() {
super();
this.facebookClick = this.facebookClick.bind(this);
}
componentDidMount() {
window.fbAsyncInit = function() {
FB.init({
appId : facebook.appId,
autoLogAppEvents : true,
status : true,
xfbml : true,
version : facebook.appVersion
});
}.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'));
}
facebookClick(e) {
e.preventDefault();
console.log('Facebook Click');
FB.login(function (response) {
// Check if the user logged in successfully.
if (response.authResponse) {
console.log('You are now logged in.');
// Add the Facebook access token to the Cognito credentials login map.
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'IDENTITY_POOL_ID',
Logins: {
'graph.facebook.com': response.authResponse.accessToken
}
});
// Obtain AWS credentials
AWS.config.credentials.get(function(){
// Access AWS resources here.
});
} else {
console.log('There was a problem logging you in.');
}
});
}
render() {
return (
<a className="ui facebook button fluid" onClick={this.facebookClick}>
<i className="facebook icon" style={comStyles().buttonFacebookIcon}></i>
SIGN IN WITH FACEBOOK
</a>
);
}
}
const RadiumHOC = Radium(FacebookLogin)
function mapStateToProps(state){
return {
}
}
export default connect(mapStateToProps)(RadiumHOC)