Question

我用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'导入React 从'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方法。当我重定向到仪表板时，用户为什么为null？但是不用重定向就可以了。

编辑：

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;
    }

}

Answer 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};
};

它的作用是显示加载消息几秒钟，然后将我的用户数据提供给我。

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

1 个答案: