Question

目前，我想在构造函数内使用setState中的userId。我想要的是在登录成功或调用firebase.auth.currentUser.uid时将userId存储到handleLogin。

我对编程的知识很差。因此，请忽略程序中的其他错误。

我的代码：

import React from 'react';
import { StyleSheet, 
          Text, 
          View, 
          TouchableOpacity,
          AsyncStorage,
        } from 'react-native';

import {RkTextInput, RkButton } from 'react-native-ui-kitten';
import {Actions} from 'react-native-router-flux';
import { createSwitchNavigator, createAppContainer  } from 'react-navigation';

import Profile from "../Profile/Profile";
import SignUp from '../SignUp/SignUp';


import * as firebase from 'firebase';


export default class Login extends React.Component {

  constructor(props){
    super(props)

    this.state=({
      email:'savadks1919@gmail.com',
      password:'123123',
      userId:'',
      errorMessage: null
    })
  }

  componentDidMount() {
    this._loadInitialState().done();
  }
    _loadInitialState = async () => {
      let value= await AsyncStorage.getItem(this.state.userId)
    }
    signup() {
      Actions.signup()
    }
    Home() {
      Actions.home()
    }

    handleLogin = (email, password, userId) => {

      firebase.auth().signInWithEmailAndPassword(email, password).then(

        this.setstate ({
          userId: firebase.auth().currentUser.uid
        }),
        alert(this.state.userId)

     ).catch(function(error) {
         var errorCode = error.code;
         var errorMessage = error.message;

         if (errorCode === 'auth/wrong-password') {
             alert('Wrong password.');
         } else {
             alert(errorMessage);         
         }
         console.log(error);
     });
    }

  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.titleText}>Taams</Text>
        <Text style={styles.edition}>Developer's Edition</Text>
        <Text style={styles.titleText}>Login.js</Text>
        <Text>Alpha 0.0.0.1</Text>

        {/*-----UserName Input-------*/}
        <RkTextInput 
            rkType= 'rounded' 
            labelStyle= {{color: 'black', fontWeight: 'bold'}}
            placeholder='UserName'
            //--------------value Handler----------------//
            onChangeText={(email) => this.setState({email})}

            //---------------------------------//
            selectionColor="#000000"
            keyboardType="email-address"
            onSubmitEditing={() => { this.password.focusInput(); }}
            inputStyle={{
            color: 'black',
            fontWeight: 'bold',
            }}/>


         {/*-----Password-------*/}
        <RkTextInput 
            secureTextEntry={true}
            rkType= 'rounded' 
            placeholder='Password'
            //--------------value Handler----------------//
            onChangeText={(password) => this.setState({password})}

            //---------------------------------//
            ref={(input) => { this.password = input; }}
            inputStyle={{
            color: 'black',
            fontWeight: 'bold',
            }}/>

        <RkButton onPress = {()=>this.handleLogin(this.state.email,this.state.password)}>
          <Text style={styles.LoginButtonText}>Login</Text>
        </RkButton>

           <View style={styles.signupTextCont}>
            <Text style={styles.signupText}>Don't have an account yet?</Text>
            <TouchableOpacity onPress={this.signup}><Text style={styles.signinButton}>SignUp</Text></TouchableOpacity> 
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  signupTextCont:{
    flexGrow: 0,
    alignItems:'center',
    justifyContent:'flex-end',
    marginVertical:15
},
signupText:{
    color:'rgba(64,64,64,0.6)',
    fontSize:16
},
signinButton:{
    color:'#000000',
    fontSize:16,
    fontWeight:'500'
},
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  edition: {
    fontSize: 15,
    //fontWeight: 'bold',
  },
  TextInput: {
    width: 300,
    height:50,
    borderColor: 'grey',
    borderWidth: 1,
  },
  LoginButtonText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
    //alignItems: 'center'

  },
});

Answer 1

如果您来自其他屏幕，并且在登录屏幕上具有导航功能，则需要在“反应导航”参数中传递userId，例如

this.props.navigation.navigate('Login', params)

并像这样在您的构造函数中获取这些参数以获取userId

this.props.navigation.getParams('params')

如果您在登录屏幕上并调用auth函数进行用户身份验证，并且还需要在组件中使用此数据，则需要在auth函数的响应上设置setState

setState({userData: res})

或者您可以在构造函数中进行初始化

this.state={ userId: firebase.auth.currentUser.uid }

如何在React Native中将值传递给构造函数this.setstate

1 个答案: