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

Posted 2023-02-19

【中文标题】重定向后反应状态数据未准备好

【英文标题】：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 删除状态中的用户属性，因为它返回一个用户等于未定义有效负载的状态

【参考方案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 毫秒内显示一条加载消息，然后它给我我的用户数据。