[英]React-native this.props is empty in callback function
I am trying to implement Facebook login in my class.我正在尝试在我的 class 中实现 Facebook 登录。 I created a button component, but when I call the Facebook api and I try to dispatch a register function I get un defined props.
我创建了一个按钮组件,但是当我调用 Facebook api 并尝试分派一个寄存器 function 时,我得到了未定义的道具。 Here is my component:
这是我的组件:
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { LoginManager, AccessToken, GraphRequest, GraphRequestManager } from 'react-native-fbsdk';
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {register} from '../Actions/authActions';
class Login extends Component {
constructor(props) {
super(props);
}
_fbAuth = () => {
LoginManager.logInWithPermissions(['public_profile','email']).then(function(result){
if(result.isCancelled){
console.log('loging cancelled')
}
else {
AccessToken.getCurrentAccessToken().then((data) => {
let accessToken = data.accessToken;
let facebookId = data.userID;
const responseInfoCallback = (error, result) => {
if (error) {
alert('Error logging in with Facebook');
}
else {
console.log('Props here are empty', this.props);
this.props.registerSubmit({
"customerName": result.name,
"customerTel": '000000000',
"customerEmail": result.email,
"customerPassword": facebookId
}).then(response => {
console.log('RESPONSE', response);
if (response && response.Success) {
this.props.navigation.navigate('App');
AsyncStorage.setItem('customerEmail', data.email);
AsyncStorage.setItem('customerPassword', data.password);
} else {
this.props.navigation.navigate('Auth');
}
});
}
}
const infoRequest = new GraphRequest('/me', {
accessToken: accessToken,
parameters: {
fields: {
string: 'name,picture,email'
}}
}, responseInfoCallback);
new GraphRequestManager().addRequest(infoRequest).start();
});
}}, function (error) {
console.log('Error logging with facebook');
});
}
render() {
return (
<View style={styles.container}>
<Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this._fbAuth.bind(this)} style={styles.signInButton}>
Facebook login
</Icon.Button>
</View>
)
}
};
const mapDispatchToProps = (dispatch) => {
// Action
return {
// Login
registerSubmit: (data) => dispatch(register(data)),
};
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
signInButton: {
width: 358,
height: 48
}
});
export default connect(null, mapDispatchToProps)(Login);
When I get into the callback function this.props is empty and therefor the registerSubmit is undefined.当我进入回调 function this.props 是空的,因此 registerSubmit 是未定义的。 This is my first project using class components I usually use hooks.
这是我第一个使用 class 组件的项目,我通常使用挂钩。 What am I doing wrong?
我究竟做错了什么?
When you run this line:当您运行此行时:
LoginManager.logInWithPermissions(['public_profile','email']).then(function(result){
The new function (result) {
scope has its own this
.新的
function (result) {
scope有自己的this
。
In order to access your component's this
, you can either save a reference to it outside the callback, and then use that from inside the callback:为了访问组件的
this
,您可以在回调外部保存对它的引用,然后在回调内部使用它:
const componentProps = this.props
LoginManager.logInWithPermissions(['public_profile','email']).then(function(result){
Or, you can use an "arrow function" for your callback, which does not have its own this
, like so:或者,您可以为您的回调使用“箭头函数”,它没有自己的
this
,如下所示:
LoginManager.logInWithPermissions(['public_profile','email']).then(result => {
(Notice how we aren't using the function
keyword anymore) (注意我们不再使用
function
关键字了)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.