Question

我是ReactJS的新手，需要一些帮助。

感谢您抽出宝贵的时间解决我的问题。

从登录页面对用户进行身份验证后，我试图从道具中获取数据。

因此，当我回到首页时，道具在初始渲染时不会在“ auth”中提供数据，而是会自动再次渲染并提供数据。

我需要初始渲染时的数据，否则由于主页中的用户数据不存在而导致页面崩溃

signin.js

class Signin extends Component {




state = { isSignedIn: false,
user: [] }


uiConfig = {
signInFlow: "popup",
signInOptions: [
  firebase.auth.GoogleAuthProvider.PROVIDER_ID,
],
callbacks: {
  signInSuccess: () => false
}
}


componentDidMount = () => {
firebase.auth().onAuthStateChanged(user => {
  this.setState({ isSignedIn: !!user,
  user})
  console.log("state user is", this.state.user)
  console.log("user on firebase", user)
})
}





render(){
  const { authError, auth } = this.props;

   if (auth.uid) return <Redirect to='/home' /> 
const signingin =  (
    this.state.isSignedIn ? (  
   <span>
   <h1>signedin</h1>
    </span> 

  ) : (
    <StyledFirebaseAuth
      uiConfig={this.uiConfig}
      firebaseAuth={firebase.auth()} 
    />
  ))`


    return (
<div>{signingin}

</div>
    )
}

}

const mapStateToProps = (state) => {
return{
authError: state.auth.authError,
auth: state.firebase.auth
}
}

const mapDispatchToProps = (dispatch) => {
return {
signIn: (creds) => dispatch(signIn(creds)),
signOut: () => dispatch(signOut())
}
}

export default connect(mapStateToProps, mapDispatchToProps)(Signin);

authActions.js

export const signIn = (credentials) => {
return (dispatch, getState, {getFirebase}) => {
  const firebase = getFirebase();

  firebase.auth()(
    credentials.email,
    credentials.password
  ).then(() => {
    dispatch({ type: 'LOGIN_SUCCESS' });
  }).catch((err) => {
    dispatch({ type: 'LOGIN_ERROR', err });
  });

}
}

export const signOut = () => {
return (dispatch, getState, {getFirebase}) => {
  const firebase = getFirebase();

  firebase.auth().signOut().then(() => {
    dispatch({ type: 'SIGNOUT_SUCCESS' })
  });
}
}

authReducer.js

const initState = {
authError: null
}

const authReducer = (state = initState, action) => {
switch(action.type){
  case 'LOGIN_ERROR':
    console.log('login error');
    return {
      ...state,
      authError: 'Login failed'
    }

  case 'LOGIN_SUCCESS':
    console.log('login success');
    return {
      ...state,
      authError: null
    }

  case 'SIGNOUT_SUCCESS':
    console.log('signout success');
    return state;


  default:
    return state
  }
};

export default authReducer;

Home.js

import React, { Component } from 'react';
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import { Redirect } from 'react-router-dom'
import { signOut } from './../store/actions/authActions'
import { connect } from 'react-redux'





class Home extends Component {


render(){



console.log( "the props here in home.js", this.props)



        return (
            <div>

        <h1> Welcome home</h1>
        <button onClick={() => { firebase.auth().signOut();}}>Sign out!</button>
              {/* <h1>Welcome {firebase.auth().currentUser.displayName}</h1> */}
              {/* <img
                alt="profile picture"
                src={firebase.auth().currentUser.photoURL}
              /> */}
              </div>
        );



}
}

    const mapStateToProps = (state) => {
        return{
          auth: state.firebase.auth
        }
       }

    const mapDispatchToProps = (dispatch) => {
        return {

          signOut: () => dispatch(signOut())
        }
      }


export default connect(mapStateToProps, mapDispatchToProps)(Home);

因此在chrome开发人员工具中，当我尝试在控制台中打印道具时它将auth设为{isLoaded: false, isEmpty: true}

道具未从Redux存储加载到初始渲染中

0 个答案: