Question

我有一个启动屏幕，其中显示了我的应用程序的徽标和标题，在用setTimeout做任何事情之前，我先给出了几秒钟。 Whithin那个时候，我正在尝试检查用户是否已经在应用程序中登录过，或者是否使用此功能是Firebase具有firebase.auth().onAuthStateChanged()的新功能，该功能应该返回带有已登录用户信息的用户对象，否则如果用户未登录，它会检测到我已登录，在这种情况下，我希望我的应用程序重定向到主场景，这工作正常，但现在我想在主场景中存储该用户的信息，例如好吧，所以我尝试使用this.props.user = user;，但是我的编译器给我一个错误：

TypeError: TypeError: TypeError: null is not an object (evaluating 'elements.props')

我该怎么办？我以为我可以通过componentDidMount函数访问道具。

我的SplashScreen.js代码

import React, { Component } from 'react';
import { View, Image } from 'react-native';
import TypeWriter from 'react-native-typewriter';
import firebase from 'firebase';
import { Actions } from 'react-native-router-flux';
import { connect } from 'react-redux';
import { reloginUser } from '../actions';

class SplashScreen extends Component {

  componentDidMount() {
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyDSV1Ozhe4M6p9Q9MdUGSCAqhW53DyUNYo",
      authDomain: "idionative.firebaseapp.com",
      databaseURL: "https://idionative.firebaseio.com",
      projectId: "idionative",
      storageBucket: "idionative.appspot.com",
      messagingSenderId: "924806570373",
      appId: "1:924806570373:web:a3f5b6dc190d8039"
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

    setTimeout(function() {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {  // Here I check whether the user was logged in or not
          this.props.user = user;
          Actions.main();
        } else {
          Actions.auth();
        }
      });
    }, 2000);
  }

  render() {

    const { sceneStyle, logoStyle, titleStyle } = styles;

    return(
      <View style={sceneStyle}>
        <Image source={require('../assets/images/logo.png')} style={logoStyle} />
        <TypeWriter typing={1} style={titleStyle}>Idionative{this.props.user}</TypeWriter>
      </View>
    );
  }

}

const styles = {
  sceneStyle: {
    backgroundColor: '#9ED0E6',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  logoStyle: {
    width: 120,
    height: 120
  },
  titleStyle: {
    fontFamily: 'NotoSans-Regular',
    fontSize: 50,
    color: 'black',
    marginTop: 20
  }
};

const mapStateToProps = ({ auth }) => {
  const { user } = auth;
  return { user };
};

export default connect(mapStateToProps, { reloginUser })(SplashScreen);

我的操作文件的代码：

import firebase from 'firebase';
import { Actions } from 'react-native-router-flux';
import { EMAIL_CHANGED, PASSWORD_CHANGED, LOGIN_USER_SUCCESS, LOGIN_USER_FAIL, LOGIN_USER, RELOGIN_USER } from './types';

export const emailChanged = (text) => {
  return {
    type: EMAIL_CHANGED,
    payload: text
  };
};

export const passwordChanged = (text) => {
  return {
    type: PASSWORD_CHANGED,
    payload: text
  };
};

export const loginUser = ({ email, password }) => {
  return (dispatch) => {
    dispatch({ type: LOGIN_USER });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(user => loginUserSuccess(dispatch, user))
      .catch(() => loginUserFail(dispatch));
  }
}

export const reloginUser = (user) => {
  return {
    type: RELOGIN_USER,
    payload: user
  };
};

const loginUserSuccess = (dispatch, user) => {
  dispatch({
    type: LOGIN_USER_SUCCESS,
    payload: user
  });

  Actions.main();
};

const loginUserFail = (dispatch) => {
  dispatch({
    type: LOGIN_USER_FAIL
  });
};

我的减速器文件：

import { EMAIL_CHANGED, PASSWORD_CHANGED, LOGIN_USER_SUCCESS, LOGIN_USER_FAIL, LOGIN_USER, RELOGIN_USER } from '../actions/types';

const INITIAL_STATE = { email: '', password: '', user: null, error: '', loading: false };

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    case LOGIN_USER:
      return { ...state, loading: true, error: '' }
    case LOGIN_USER_SUCCESS:
      return { ...state, ...INITIAL_STATE, user: action.payload, };
    case LOGIN_USER_FAIL:
      return { ...state, error: 'This User Does Not Exist', password: '', loading: false }
    case RELOGIN_USER:
      return { ...state, user: action.payload }
    default:
      return state;
  }
};

如何将用户对象从firebase auth请求设置为我的redux状态？

0 个答案: