添加if语句与useSelector Hook后页面无法渲染的问题

云上老周

2026-8-6

React组件渲染异常问题排查与修复

问题原因

Reducer赋值错误：login reducer中错误将用户数据赋值给state.value，而非state.user，导致Redux store内用户状态始终无法正确更新。
无效配置冗余：createSlice参数中多余添加user:null，虽不直接报错，但易引发逻辑混淆。
潜在崩溃风险：若store初始化异常导致state.user为null，selectUser中的state.user.user会触发Cannot read property 'user' of null错误，直接造成组件崩溃停止渲染；同时因reducer未正确更新状态，App会一直渲染Login组件，若Login自身存在渲染问题，也会导致整体渲染失败。

修复方案

修正Reducer赋值逻辑
将login reducer内的赋值目标改为state.user，保证用户数据正确存入store：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  status: 'idle',
};

export const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    login: (state, action) => {
      state.user = action.payload; // 替换原state.value为state.user
    },
    logout: (state) => {
      state.user = null;
    },
  },
});

export const {login, logout} = userSlice.actions;
export const selectUser = (state) => state.user.user;
export default userSlice.reducer;

移除冗余配置
删除createSlice参数中多余的user:null，保持配置结构清晰。
验证选择器与组件逻辑

确认selectUser逻辑与store结构匹配：若store中user reducer的注册键为user，则state.user.user可正确获取用户状态；
检查Login组件，确保其无渲染错误（如未处理的props、无效DOM操作等），避免因Login组件自身问题导致App渲染中断。