React-Redux-Axios-Typescript报错：无法读取undefined的属性（userId）

问题根源 #

你后端/login接口返回的用户数据字段是applicationUser，但前端处理登录成功逻辑时错误访问了action.payload.user，导致该属性为undefined，进而触发读取userId的报错。

从Postman返回结果可明确看到数据结构：

{
    "applicationUser": {
        "userId": 2,
        // ...其他用户字段
    },
    "token": "*long token value*"
}

而你的UserSlice.ts中loginUser.fulfilled的处理代码错误使用了user字段：

state = {
    ...state,
    loggedIn: {
        userId: action.payload.user.userId, // 此处user不存在
        firstName: action.payload.user.firstName,
        //... 其他属性...
    }
};

解决方案 #

1. 修正字段访问路径 #

将action.payload.user替换为action.payload.applicationUser，修改后的loginUser.fulfilled逻辑如下：

builder.addCase(loginUser.fulfilled, (state, action) => {
    state = {
        ...state,
        loggedIn: {
            userId: action.payload.applicationUser.userId,
            firstName: action.payload.applicationUser.firstName,
            // 其他字段同步替换为applicationUser下的属性
        },
        error: false // 登录成功时重置错误状态
    };
    return state;
});

2. 补充错误处理（可选但推荐） #

添加字段存在性检查，同时处理登录失败场景，避免意外报错：

// 处理登录失败
builder.addCase(loginUser.rejected, (state) => {
    state.error = true;
    state.loggedIn = undefined;
});

builder.addCase(loginUser.fulfilled, (state, action) => {
    // 校验返回数据完整性
    if (!action.payload?.applicationUser) {
        state.error = true;
        return state;
    }
    state = {
        ...state,
        loggedIn: {
            userId: action.payload.applicationUser.userId,
            firstName: action.payload.applicationUser.firstName,
            // 其他用户属性
        },
        error: false
    };
    return state;
});

3. 优化useEffect逻辑（避免重复请求） #

当前逻辑会在fromRegister变化时重复触发登录请求，添加条件判断并重置状态：

useEffect(() => {
    if (state.user.loggedIn) {
        navigate("/home");
        return; // 已登录直接跳转，终止后续逻辑
    }
    if (state.user.fromRegister && !state.user.loggedIn) {
        dispatch(loginUser({
            username: state.register.username,
            password: state.register.password
        }));
        // 发送请求后重置fromRegister，避免重复触发
        dispatch(setFromRegister(false));
    }
    if (state.register.login) {
        dispatch(setFromRegister(true));
    }
}, [state.register.login, state.user.loggedIn, state.user.fromRegister]);

验证步骤 #

1. 修改代码后重启前端服务
2. 完成注册流程，查看Redux DevTools中user状态的loggedIn字段是否正确更新
3. 确认是否自动跳转到/home页面

内容的提问来源于stack exchange，提问作者yerokha