登录时出现解构categories的UnhandledThrownError，刷新后消失如何修复？

报错信息：UnhandledThrownError! 无法解构'(0 , react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector)(...)'的属性'categories'，因为它未定义。

问题场景 #

登录操作触发上述错误，但刷新页面后错误自动消失。

相关代码片段 #

Auth.js（Redux Slice）

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

export const authSlice = createSlice({
  name: "auth",
  initialState: {
    isAuthenticated: false,
    user: {},
  },
  reducers: {
    setUser: (state, { payload }) => {
      state.user = payload.user;
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.user = {};
      state.isAuthenticated = false;
    },
  },
});

export const { setUser, logout } = authSlice.actions;
export default authSlice.reducer;

index.js（Redux Store）

import { configureStore } from "@reduxjs/toolkit";
import authReducer from "./auth.js";

export default configureStore({
  reducer: {
    auth: authReducer,
  },
});

transaction form.js（报错组件）

const { categories } = useSelector((state) => state.auth.user);

问题原因 #

1. Redux初始状态中auth.user是空对象{}，登录过程中setUser动作还未完成时，组件尝试解构categories会报错。
2. 刷新页面后，用户数据可能已被持久化（如localStorage），重新加载时auth.user已包含categories字段，因此不再报错。

修复方案 #

方案1：组件层面添加默认值

直接在解构时为categories设置默认值，避免属性不存在时报错：

// 方式1：解构时设置默认值
const { categories = [] } = useSelector((state) => state.auth.user);

// 方式2：可选链+兜底值，更严谨
const user = useSelector((state) => state.auth.user);
const categories = user?.categories || [];

方案2：初始化Redux状态时添加默认值

在Auth.js的初始状态中，给user对象预设categories的默认值，从根源保证属性存在：

initialState: {
  isAuthenticated: false,
  user: {
    categories: [] // 初始化空数组作为默认值
  },
},

方案3：登录时兜底处理用户数据

确保setUser动作存入Redux的user对象一定包含categories字段，即使接口返回数据中没有该字段：

setUser: (state, { payload }) => {
  state.user = {
    ...payload.user,
    // 兜底设置空数组，避免后续解构报错
    categories: payload.user.categories || []
  };
  state.isAuthenticated = true;
},

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