UnhandledThrownError，无法解构“（0.react_redux__WEBPACK_IMPORTED_MODULE_2__.useSelector）（...）”的属性“类别”，因为它未定义

Question

Auth.js

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 (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);

** when I logged in there was a error but on reloading the page the error is gone. How to fix the error**

Answer 1

If you are not logged in, you don't get a user, and then you cannot extract categories from it. Several solutions, one is

const { categories } = useSelector((state) => state.auth.user ?? {categories: []});

Depending on what you do with the user and category data, you might be better off doing something like this:

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