我正在尝试使用firebase在我的应用程序中使用电话号码登录,但我遇到了登录过程的问题.我无法使用firebase中的电话号码登录,但如果我使用电话号码注册并重定向到主页,则它正常工作.我
这是我的代码:
renderLoginButton() { if (this.props.loading) { return ( <Spinner size="large" /> ); } return ( <Button style={{ alignSelf: 'flex-start' }} onPress={this.onLoginBtnClicked.bind(this)} > Login </Button> ); }
onLoginBtnClicked(){
const { contact, password } = this.props; const error = Validator('password', password) || Validator('contact', contact); if (error !== null) { Alert.alert(error); } else { console.log('else'); // this.props.loginUser({ contact, password}); const mobileNo = '+91'+contact; firebase.auth().signInWithPhoneNumber(mobileNo) .then(confirmResult => console.log(confirmResult), curr = firebase.auth(), console.log("curr"+JSON.stringify(curr)), this.setState({ data: curr}), NavigationService.navigate('Home') ) .catch(error => console(error.message) ); } }
CustomDrawerComponent.js
import React, { Component } from 'react'; import { View, Image, Text } from 'react-native'; import { DrawerItems } from 'react-navigation'; import { connect } from 'react-redux'; import { fetchUserDetails } from '../actions'; class CustomDrawerContentComponent extends Component { state = { uri: '', isfailed: '' } componentWillMount() { this.props.fetchUserDetails(); } componentWillReceiveProps(nextProps) { let uri = ''; if (nextProps.ProfilePic !== '') { uri = nextProps.ProfilePic; this.setState({ uri, isfailed: false }); } else { uri = '../images/ic_person_24px.png'; this.setState({ uri, isfailed: true }); } this.setState({ uri }); } renderProfileImage() { if (!this.state.isfailed) { return ( <Image style={styles.profileImageStyle} source={{ uri: (this.state.uri) }} /> ); } return ( <Image style={styles.profileImageStyle} source={require('../images/ic_person_24px.png')} /> ); } render() { console.log('Profile Pic :: ', this.props.ProfilePic); return ( <View style={styles.container}> {this.renderProfileImage()} <Text style={styles.textStyle}> {this.props.name} - {this.props.category} </Text> <DrawerItems {...this.props} /> </View> ); } } const styles = { container: { flex: 1, paddingLeft: 10 }, textStyle: { fontSize: 14, textAlign: 'left', color: '#000000' }, profileImageStyle: { alignSelf: 'flex-start', marginTop: 16, padding: 10, width: 40, height: 40, borderRadius: 75 } }; const mapStateToProps = state => { const { userprofile } = state; return userprofile; }; export default connect(mapStateToProps, { fetchUserDetails })(CustomDrawerContentComponent);
调用堆栈:
为什么用户返回未定义(甚至为null)?你知道有一个登录用户,你刚刚登录,哎呀,你甚至可以在chrome dev工具中看到用户对象.
那么为什么它还在返回undefined?有一个直接的答案.
在准备好使用该对象之前,您将获取用户对象.
现在,由于几个不同的原因,这可能会发生,但如果您遵循这两个“规则”,您将不会再次看到该错误.
规则#1:将其移出构造函数()
当你有类似的东西:
constructor(){ this.userId = firebase.auth().currentUser.uid }
超过一半的页面加载时,构造函数将尝试在用户准备好之前获取用户,应用程序阻止它,因为页面未完全加载,因此您将尝试访问uid还没有的财产.
当您的页面完全加载后,您现在可以调用以获取currentUser.uid
规则#2:使它成为一个可观察的
您可以采用另一种方法,即我们之前的Firebase调用:firebase.auth().currentUser是同步的.我们可以通过订阅auth observable来使它异步.
/** * When the App component mounts, we listen for any authentication * state changes in Firebase. * Once subscribed, the 'user' parameter will either be null * (logged out) or an Object (logged in) */ componentDidMount() { this.authSubscription = firebase.auth().onAuthStateChanged((user) => { this.setState({ loading: false, user, }); }); } /** * Don't forget to stop listening for authentication state changes * when the component unmounts. */ componentWillUnmount() { this.authSubscription(); } render() { // The application is initialising if (this.state.loading) return null; // The user is an Object, so they're logged in if (this.state.user) return <LoggedIn />; // The user is null, so they're logged out return <LoggedOut />; } }
来源文章:Why does Firebase return undefined
when fetching the uid
?
React Native的一个很好的教程将在这里:Getting started with Firebase Authentication on React Native因为,您的代码没有显示太多,我希望您更新您的问题以显示更多代码,以便我可以查看.