重定向后反应状态数据未准备好答案

【问题标题】：React state data not ready after redirect重定向后反应状态数据未准备好
【发布时间】：2020-03-23 21:27:21
【问题描述】：

我用 react 和 node 构建了一个登录/注册系统。

登录后，我调用了一个加载用户的 loadUser 方法。这工作得很好。但是一旦我在登录后重定向，该状态下的数据对我来说是不可用的。没有重定向它工作正常。用户加载并显示在我的状态。但是在重定向之后什么都没有出现。

登录组件：

const onSubmit = (e) => {
    e.preventDefault(); 
    login({email,password});
};

if(isAuthenticated && !isLoading){
    return  <Redirect to="/dashboard"/>
 }

登录操作：

export const login = ({email,password}) => async dispatch => {
    const config = {
        headers : {
            'Content-Type' : 'application/json',
        }
    };

    const body = JSON.stringify({email,password});

    try {
        const res = await axios.post('/auth', body, config);
        dispatch({type : LOGIN_SUCCESS , payload:res.data});
        dispatch(loadUser());
    } catch(err){
        const errors = err.response.data.errors;

        if(errors) {
            errors.forEach(error => {
                dispatch(setAlert(error.msg,'error'));
            })
        }
        dispatch({type: LOGIN_FAIL});
    }

};

我重定向到的页面：

从“反应”导入反应从'react-redux'导入{connect}；

const Dashboard = ({user}) => {
    return (
        <div>
            <h1>{user.name}</h1>
        </div>
    )
};

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

export default connect(mapStateToProps)(Dashboard);

正如您在登录操作中看到的那样，loadUser 方法已运行。为什么用户：当我重定向到仪表板时为空。但是没有重定向就可以了..

编辑：

import {
    REGISTER_SUCCESS,
    REGISTER_FAIL,
    LOAD_USER,
    AUTH_ERROR,
    LOGIN_SUCCESS,
    LOGIN_FAIL,
} from '../actions/types';

const initialState = {
    token : localStorage.getItem('token'),
    isAuthenticated : null,
    loading: true,
    user : null,
};

export default function(state = initialState , action) {
    const {payload, type} = action;

    switch (type) {
        case LOAD_USER:
            return {
                ...state, 
                isAuthenticated : true,
                loading: false,
                user: payload
            }; 

        case REGISTER_SUCCESS:
        case LOGIN_SUCCESS:
            console.log(payload.token)
            localStorage.setItem('token', payload.token);
            return {
                ...state,
                ...payload,
                isAuthenticated: true,
                loading:false
            };

        case REGISTER_FAIL:
        case AUTH_ERROR:   
        case LOGIN_FAIL:  
            localStorage.removeItem('token');
            return {
                ...state,
                token: null,
                isAuthenticated:null,
                loading:false
            };

        default:
            return state;
    }

}

【问题讨论】：

你能添加你的减速器吗？
@ocheriaf 我添加了减速器
你正在使用重定向就像刷新页面请查看这里reacttraining.com/react-router/web/api/Redirect
此外，当您调用 loadUser 操作时，您不会发送任何有效负载，因此reducer 删除状态中的用户属性，因为它返回一个用户等于未定义有效负载的状态

标签： reactjs redux react-redux react-router

【解决方案1】：

所以该州的用户不能直接使用，所以我必须建立一个检查。

const Dashboard = ({user}) => {
    return (<div>
        <h1>{user ? (<div>{user.name}</div>) : (<div>loading...</div>)}</h1>
    </div>)

};

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

它的作用是在 fe 毫秒内显示一条加载消息，然后它给我我的用户数据。

【讨论】：