React使用useContext+useRef登录时user返回null的问题排查

你的核心问题出在Reducer文件的action类型匹配错误：

在Login组件中，登录成功时你dispatch的是type: "LOGIN_SUCCESS"，失败时是type: "LOGIN_FAILURE"，但在Reducer里对应的case却写成了"LOGOUT_SUCCESS"和"LOGOUT_FAILURE"，导致这两个action无法触发正确的状态更新，user始终停留在初始的null值。

修正后的Reducer代码 #

const Reducer = (state, action)=>{
    switch(action.type) {
       case "LOGIN_START":
        return {
            user: null,
            isFetching: true,
            error: false
        }
        case "LOGIN_SUCCESS": // 修正action类型
            return {
                user: action.payload,
                isFetching: false,
                error: false,
        }
        case "LOGIN_FAILURE": // 修正action类型
            return {
                user: null,
                isFetching: false,
                error: true,
        }
        default:
            return state
    }
}

export default Reducer

额外说明 #

你当前在组件顶层写的console.log(user)会在组件每次渲染时执行：

• 初始渲染时打印null（符合预期）
• 登录成功后组件会重新渲染，此时会打印正确的用户信息

如果想只在登录状态变化后查看，可以把console.log(user)放到useEffect里监听user的变化：

import { useEffect } from "react";

// 在Login组件中添加
useEffect(() => {
  console.log(user);
}, [user]);

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