React-native this.props回调函数中为空
React-native this.props is empty in callback function
我正在尝试在我的 class 中实现 Facebook 登录。我创建了一个按钮组件,但是当我调用 Facebook api 并尝试发送一个注册函数时,我得到了未定义的道具。
这是我的组件:
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);
当我进入回调函数时 this.props 是空的,因此 registerSubmit 是未定义的。这是我第一个使用 class 组件的项目,我通常使用钩子。我做错了什么?
当你运行这一行:
LoginManager.logInWithPermissions(['public_profile','email']).then(function(result){
新的 function (result) {
作用域有自己的 this
。
为了访问组件的 this
,您可以在回调外部保存对它的引用,然后在回调内部使用它:
const componentProps = this.props
LoginManager.logInWithPermissions(['public_profile','email']).then(function(result){
或者,您可以为回调使用“箭头函数”,它没有自己的 this
,如下所示:
LoginManager.logInWithPermissions(['public_profile','email']).then(result => {
(注意我们不再使用 function
关键字)
我正在尝试在我的 class 中实现 Facebook 登录。我创建了一个按钮组件,但是当我调用 Facebook api 并尝试发送一个注册函数时,我得到了未定义的道具。 这是我的组件:
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);
当我进入回调函数时 this.props 是空的,因此 registerSubmit 是未定义的。这是我第一个使用 class 组件的项目,我通常使用钩子。我做错了什么?
当你运行这一行:
LoginManager.logInWithPermissions(['public_profile','email']).then(function(result){
新的 function (result) {
作用域有自己的 this
。
为了访问组件的 this
,您可以在回调外部保存对它的引用,然后在回调内部使用它:
const componentProps = this.props
LoginManager.logInWithPermissions(['public_profile','email']).then(function(result){
或者,您可以为回调使用“箭头函数”,它没有自己的 this
,如下所示:
LoginManager.logInWithPermissions(['public_profile','email']).then(result => {
(注意我们不再使用 function
关键字)