Reactjs 仅当我刷新页面时读取道具数据

我正在使用功能组件的React。登录时，我使用

history.push（'/Dashboard'）

将用户重定向到仪表板页面。当我在仪表板页面上记录控制台日志时，它会显示

道具中可用的所有数据。但是数据不会呈现在页面上，它显示了
“未捕获（承诺中）类型错误：无法读取未定义的属性“profile”
。当我刷新页面或在历史记录中使用
{forceRefresh:true}
时，一切正常

边栏组件：

import React,{useEffect} from 'react';
import { Link,withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../../../_actions/users'
import {
    Sidebar,
    UncontrolledButtonDropdown,
    Avatar,
    AvatarAddOn,
    DropdownToggle,
    DropdownMenu,
    DropdownItem
} from './../../../components';

function SidebarTopA(props) {
    const { authentication } = props
    function logout(){
        return (e)=>props.logout()
    }
    return (
        <React.Fragment>
            { /* START: Sidebar Default */}
            <Sidebar.HideSlim>
                <Sidebar.Section className="pt-0">
                    <Link to="/" className="d-block">
                        <Sidebar.HideSlim>
                            <Avatar.Image
                                size="lg"
                                src={authentication.user.user.profile.profile_photo}
                                addOns={[
                                    <AvatarAddOn.Icon
                                        className="fa fa-circle"
                                        color={authentication.loggedIn ? "success" :"warning"}
                                        key="avatar-icon-fg"
                                    />
                                ]}
                            />
                        </Sidebar.HideSlim>
                    </Link>

                    <UncontrolledButtonDropdown>
                        <DropdownToggle color="link" className="pl-0 pb-0 btn-profile sidebar__link">
           {authentication.user.user.first_name} {authentication.user.user.last_name}
                            <i className="fa fa-angle-down ml-2"></i>
                        </DropdownToggle>
                        <DropdownMenu persist>
                            <DropdownItem header>
                            {authentication.user.user.email}
                            </DropdownItem>
                            <DropdownItem divider />
                            <DropdownItem tag={Link} to="/apps/profile-details">
                                <i className="fa fa-fw fa-user mr-2"></i>
                    Your Profile
                    </DropdownItem>
                            <DropdownItem divider />
                            <DropdownItem tag={Link} to="/" onClick={logout()}>
                                <i className="fa fa-fw fa-sign-out mr-2"></i>
                        Sign Out
                    </DropdownItem>
                        </DropdownMenu>
                    </UncontrolledButtonDropdown>
                    <div className="small sidebar__link--muted">
                    {authentication.user.user.profile.job_title}
                    </div>
                </Sidebar.Section>
            </Sidebar.HideSlim>
            { /* END: Sidebar Default */}

            { /* START: Sidebar Slim */}
            <Sidebar.ShowSlim>
                <Sidebar.Section>
                    <Avatar.Image
                        size="sm"
                        src={authentication.user.user.profile.profile_photo} 
                        addOns={[
                            <AvatarAddOn.Icon
                                className="fa fa-circle"
                                color="white"
                                key="avatar-icon-bg"
                            />,
                            <AvatarAddOn.Icon
                                className="fa fa-circle"
                                color="success"
                                key="avatar-icon-fg"
                            />
                        ]}
                    />
                </Sidebar.Section>
            </Sidebar.ShowSlim>
            { /* END: Sidebar Slim */}
        </React.Fragment>

    );

}

function mapState(state) {
    const { authentication } = state
    return { authentication };
}
const actionCreators = {
    logout: userActions.logout
}
const connectedHomePage = withRouter(connect(mapState, actionCreators)(SidebarTopA));
export { connectedHomePage as SidebarTopA };

import React，{useffect}来自“React”；
从“react router dom”导入{Link，withRouter}；
从'react redux'导入{connect}；
从“../../../../\u actions/users”导入{userActions}
进口{
侧边栏，
不受控制的按钮向下移动，
阿凡达
阿瓦塔拉登，
下拉开关，
下拉菜单，
下拉项
}来自“/../../../../components”；
功能侧边栏（道具）{
const{authentication}=props
函数注销（）{
return（e）=>props.logout（）
}
返回(
{/*开始：侧边栏默认值*/}
{authentication.user.user.first_name}{authentication.user.user.last_name}
{authentication.user.user.email}
你的个人资料
退出
{authentication.user.user.profile.job_title}
{/*结束：侧边栏默认值*/}
{/*开始：侧边栏Slim*/}
{/*END:Sidebar Slim*/}
);
}
函数映射状态（状态）{
const{authentication}=状态
返回{身份验证}；
}
const actionCreators={
注销：userActions.logout
}
const connectedHomePage=withRouter（connect（mapState，actionCreators）（SidebarTopA））；
导出{connectedHomePage as SidebarTopA}；
在渲染SidebarTopA时，配置文件信息似乎不可用。

我建议您保护它，并清除forceRefresh。

将此项添加到SidebarTopA中，位于现有报税表之上（并去掉forceRefresh）：

最后，我使用redux persist包解决了这个问题

我的店铺设置为：

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
import { composeWithDevTools  } from 'redux-devtools-extension';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
    key: 'chedsk',
    storage,
  }
const loggerMiddleware = createLogger();

const persistedReducer = persistReducer(persistConfig, rootReducer)
 
const composeEnhancers = composeWithDevTools({trace: true, traceLimit: 20});
export const store = createStore(
    persistedReducer,composeEnhancers( applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    ))
   
)
export const persistor = persistStore(store)

应用程序内组件我做

import { store, persistor } from './_helpers/store';
import { PersistGate } from 'redux-persist/integration/react'
render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>,
    document.querySelector('#root')
);

从“/_helpers/store”导入{store，persistor}；
从“redux persist/integration/react”导入{PersistGate}
渲染(
,
document.querySelector（“#root”）
);
你能制作代码沙盒吗？嗨，我在现有返回语句的顶部添加了一个错误，但现在我在页面加载时在侧边栏上什么也不显示，但与之前刷新页面时一样，它工作正常。如果（！authentication.user | | |！authentication.user.user | |！authentication.user.user.profile）{return'}return（//component），请再次告诉我哪里错了。很抱歉听到这个消息。正如@adir abargil所说，您应该创建并共享一个最小的可复制示例代码sandobox。感谢@Louis的帮助，我无法创建代码沙盒，因为所有组件都是相互耦合的，很难将它们拉出。现在，我们分配const{authentication}=props，对另一个变量的身份验证让auth=authentication及其作用，但我仍然不知道为什么会发生这种情况。我在nuxt js中执行相同的操作，但在react js中不起作用。数据在控制台上可见，但在视图中不呈现。
import { store, persistor } from './_helpers/store';
import { PersistGate } from 'redux-persist/integration/react'
render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>,
    document.querySelector('#root')
);