reactjs - React Redux Firebase 在身份验证后刷新之前不加载道具

问题描述

用户登录后，除非用户刷新页面，否则不会加载道具，为什么会这样？

这是他们在登录后重定向到的仪表板，然后使用 mapstatetoprops/connect 从 Firebase 加载这些道具。

我一直在检查其他线程，但似乎与我的问题无关或接近修复它，任何帮助将不胜感激。

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { firestoreConnect, isLoaded, isEmpty } from 'react-redux-firebase'
import ProjectList from '../Projects/ProjectList'
import { compose } from 'redux'
import CreateProject from '../Projects/CreateProject'
import { Redirect } from 'react-router-dom'
import NavComponent from './NavComponent'
import MainSidebar from'./MainSidebar'
import SearchMain from './Search/SearchMain'
import Notifications from './Notifications'


class Dashboard extends Component {
    state = {
        admins: '',
        isLoaded: false
    }

    render() {

    const {projects, auth, profile, organisations, innerprojects, comments, notifications} = this.props;
    const searchMain = auth.uid ? <SearchMain profile={profile} comments={comments} innerprojects={innerprojects} projects={projects}/>  : null
    const notificationMain = auth.uid ? <Notifications profile={profile} notifications={notifications} /> : null


        if (!auth.uid) return <Redirect to='/signin' />

        if (isLoaded(auth) || !isEmpty(auth)) {
        return (
        <>
        {profile.email ? <NavComponent  notifications={notifications} comments={comments} innerprojects={innerprojects} projects={projects} auth={auth} profile={profile}/> : null }

          <div className="container project-details-container">
            <div className="row home-header-row">
                <MainSidebar projects={projects} profile={profile}/>
                <div className="col-lg-9 dash-section section">

                    <div className="row">
                        <div className="col-md-10">
                            {searchMain}
                        </div>
                        <div className="col-md-2 notifications-col">
                            {projects? notificationMain : null}
                            <CreateProject admins={this.state.admins} organisations={organisations}/>
                        </div>
                    </div>
                    {this.props.projects? <ProjectList auth={auth} projects={projects} authID={auth.uid} profile={profile}/> : null }

                </div>

            </div>
          </div>
        </>
        )
        }else{
            return <p>Loading</p>
        }
    }
}

const mapStateToProps = (state) => {
    return {
        projects: state.firestore.ordered.projects,
        comments: state.firestore.ordered.comments,
        innerprojects: state.firestore.ordered.innerprojects,
        auth: state.firebase.auth,
        profile: state.firebase.profile,
        notifications: state.firestore.ordered.notifications,
        organisations: state.firestore.ordered.organisations
    }
}

export default compose(
connect(mapStateToProps),
firestoreConnect([
    { collection: 'projects', orderBy: ['createdAt', 'desc']},
    { collection: 'comments', orderBy: ['createdAt', 'desc']},
    { collection: 'innerprojects', orderBy: ['createdAt', 'desc']},
    { collection: 'organisations', orderBy: ['time', 'desc'] },
    { collection: 'notifications', limit: 5, orderBy: ['time', 'desc']}
    ])
    )(Dashboard)

看起来他们的 state.firestore 有问题，state.firebase 正在正确提取数据。请看下面的截图，看看哪些道具正在加载，哪些没有。

开发控制台截图

标签： reactjsreduxfirebase-authentication

reactjs - React Redux Firebase 在身份验证后刷新之前不加载道具

问题描述

解决方案

推荐阅读