我正在建立登录系统.当我使用 Select 器函数时,我在存储状态值时遇到问题.在我的系统中,我想从存储状态值中获取isSuccess、Error、UserInfo

/login/index.js

const userLogin = useSelector((state) => state.userLogin);
console.log(userLogin);
const { isSuccess, error, userInfo } = userLogin;

如果出错,它将在用户界面上显示错误消息,否则,如果isSuccess,它将显示成功消息.当POST到API成功(表示用户登录成功)且用户数据被调度到登录时出现isSuccess成功会减少发送到登录的错误值否则会失败减少

/action/userAction.js

import {
loginSuccess,
loginFail,
} from "\~/redux/user/userLoginSlice";

export const login = (inputs) =\> async (dispatch) =\> {
try {
const {data} = await request.post("/auth/login", inputs);
dispatch(loginSuccess(data));
localStorage.setItem("userInfo", JSON.stringify(data));
} catch (error) {
console.log(error.response.data)
dispatch(loginFail(error.response.data))
}

.然而,不仅仅是在登录成功减少时获取isSuccess,它还在上次登录失败时获得错误 console.log(userLogin).它应该只显示userInfo和isSuccess.有人能帮我解决这个问题吗?这是减少

userLoginSlice.js



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


const userLoginSlice = createSlice({
    name: 'userInfo',
    initialState: {},
    reducers: {
        loginSuccess: (state, action) => {
            state.isSuccess = true;
            state.userInfo = action.payload;
        },
        loginFail: (state, action) => {
            state.error = action.payload
        },
    },
});

export const { loginSuccess, loginFail } = userLoginSlice.actions;

export default userLoginSlice.reducer;

还有我的减肥店

store.js

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

import productModalReducer from './product-modal/productModalSlice';
import cartItemsSlice from './cart/cartSlide';
import userLoginSlice from './user/userLoginSlice.js';
import userRegisterSlice from './user/userRegisterSlice.js';
import userUpdateSlice from './user/userUpdateSlice.js';

const userInfoFromStorage = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null;

const initialState = {
    userLogin: { userInfo: userInfoFromStorage },
};

export const store = configureStore({
    reducer: {
        productModal: productModalReducer,
        cartItems: cartItemsSlice,
        userLogin: userLoginSlice,
        userRegister: userRegisterSlice,
        userUpdate: userUpdateSlice,
    },
    preloadedState: initialState,
});

当派单减少时,状态值不会改变

推荐答案

这似乎是因为loginSuccess只给州增加了userInfoisSuccess,而不是省略了之前的error.

或许可以try 重置状态值以排除减速器中的error:

const userLoginSlice = createSlice({
  name: "userInfo",
  initialState: {},
  reducers: {
    loginSuccess: (state, action) => {
      // ???? Reset state to omit error message in loginSuccess
      state = { isSuccess: true, userInfo: action.payload };
    },
    loginFail: (state, action) => {
      // ???? Could add "isSuccess: false, userInfo: null" if needed
      state = { error: action.payload };
    },
  },
});

或者返回状态值,而不使用IMMER代理状态:

const userLoginSlice = createSlice({
  name: "userInfo",
  initialState: {},
  reducers: {
    loginSuccess: (state, action) => {
      // ???? Reset state to omit error message in loginSuccess
      return { isSuccess: true, userInfo: action.payload };
    },
    loginFail: (state, action) => {
      // ???? Could add "isSuccess: false, userInfo: null" if needed
      return { error: action.payload };
    },
  },
});

Reactjs相关问答推荐

eslint -无法解析模块的路径@web3modal/ethers/react导入/no-unresolved

如何在没有 node 模块的情况下利用外部Java脚本文件制作OWL carousel

使用Reaction钩子窗体验证可选字段

react -在选项中 Select 我想要显示和图像.但当我 Select 该选项时,我希望控件仅显示该选项的文本部分

Redux Store未触发React组件中的重新呈现

Antd V5组件自定义主题

面临 React 模式中点击外部条件的问题

如何更新redux状态存在的输入框

如何将 DocuSign 控制台界面嵌入到 React 应用中

为什么这个 React 组件会导致无限渲染?

根据其中的值不同地react setState 更新状态

如何禁用来自 React Native API 的某些特定项目的可touch 不透明度

将路径数组传递给Route会引发错误

Storybook - 无法解析generated-stories-entry.cjs/字段browser不包含有效的别名配置

将 Material UI 菜单渲染为

如何使用 useEffect 和 if 语句 React

如何在 React x 中返回组件?

错误未捕获的错误:[App] 不是 组件. 的所有子组件必须是

警告:您在没有 `onChange` 处理程序的情况下为表单字段提供了 `value` 属性

react 路由:router.ts:11 没有匹配的路由位置/管理