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

【问题标题】：React Redux Firebase Not loading props until refresh after authReact Redux Firebase 在身份验证后刷新之前不加载道具
【发布时间】：2020-02-28 12:33:25
【问题描述】：

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

这是他们在登录后被重定向到的仪表板，然后使用 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 正在正确提取数据。请看下面的截图，看看哪些道具正在加载，哪些没有。

dev console screenshot

【问题讨论】：

首先请格式化你的代码，这样它的可读性会更好
现在应该会更好
我找到了解决方案，如果其他人需要帮助，添加到帖子底部
很高兴听到您找到了解决方案。请将其发布为答案，而不是对您的问题进行编辑。 Stack Overflow 鼓励自行回答问题，让其他人更容易看到您已获得帮助，并让您通过分享解决方案赢得声誉。

标签： reactjs redux firebase-authentication

【解决方案1】：

如果您有适当的安全规则，则应确保在附加任何侦听器之前加载身份验证。这在文档中的几个地方都有介绍，包括 auth recipes section 和 queries 部分

【讨论】：