我正在try 使用Reaction-Redux和Redux工具包创建打开和关闭模式表单的功能.它向我抛出以下错误:

Uncaught TypeError: Cannot read properties of undefined (reading 'editQuoteModalShown')

store.jsx

import { apiSlice } from "./api/apiSlice";
import { editQuoteModalSlice } from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    editQuoteModalSlice: editQuoteModalSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

setupListeners(store.dispatch);

editQuoteModalSlice.jsx

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

const initialState = {
  editQuoteModalShown: false,
};

export const editQuoteModalSlice = createSlice({
  name: "editQuoteModalSlice",
  initialState,
  reducers: {
    setEditQuoteModalShownDispatch: (state, action) => {
      state.editQuoteModalShown = action.payload;
    },
  },
});

export const editQuoteModalShownSelector = (state) =>
  state.editQuoteModalSlice.editQuoteModalShown;

export const { setEditQuoteModalShownDispatch } =
  editQuoteModalSlice.actions;

export default editQuoteModalSlice.reducer;

我以这种方式使用 Select 器: EditQuoteModal.jsx

import {
  editQuoteModalShownSelector,
  setEditQuoteModalShownDispatch,
} from "./editQuoteModalSlice";

export default function EditQuoteModal() {

  const editQuoteModalShown = useSelector(editQuoteModalShownSelector);

  return (
    <div>
      {editQuoteModalShown && (<Modal />)}
    </div>
  );
}

我已经正确地导入了所有内容.不知道是什么导致了错误.

推荐答案

Issue

store没有从editQuoteModalSlice导入正确的导出.

Store.js

import { editQuoteModalSlice } from "../features/quotes/editQuoteModalSlice";

Reducer函数是从editQuoteModalSlice导出101,而不是命名导出.

EditQuoteModalSlice.js

export default editQuoteModalSlice.reducer;

editQuoteModalSlice is undefined as an import in Store.js and passed along as the reducer when creating the store object.

Store.js

import {
  editQuoteModalSlice // <-- undefined
} from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    editQuoteModalSlice: editQuoteModalSlice, // <-- undefined reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

Solution

editQuoteModalSlice文件导入正确的导出.

Store.js

import editQuoteModalReducer from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    editQuoteModalSlice: editQuoteModalReducer, // <-- defined reducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

Reactjs相关问答推荐

Shadck/ui Select -当用户 Select 项目时更改状态

如何避免react 使用ESLINTreact 挂钩/穷举-deps进行第一次呈现

可选链和useState挂钩

try 在Dockerfile中使用AWS CLI将React构建工件上传到S3时出错

子路径上未定义useMatches句柄

REACTION-Easy-SORT返回.map错误

Material-UI 和 React Hook 表单不记录值

在 React 中,如何在指向同一组件的路由中拥有未定义数量的多个动态路径段?

如何在 TimePicker 中更改时钟 colored颜色 和确定按钮字体 colored颜色 - MUI React

如何将 npm 包添加到我的 Vite + React 应用程序中?

在 monorepo 内的工作区或库之间共享 redux 状态

在添加了useplacesautocomplete后,在构建React/Next.js项目时,NPM抛出类型期望的错误

redux 工具包使用中间件构建器函数时,必须返回一个中间件数组

如何在 JS 中绘制具有不同笔画宽度的样条线

如何在使用 React Router v6 将当前页面的状态传递给上一页的同时导航到上一页?

刷新页面时状态改变问题

SonarCloud 代码覆盖率不适用于 Github Action

如何解决在 react.js 中找不到模块错误

如何不旋转 mui 自动完成弹出图标?

如何在 v6.4 中将 Auth0 提供程序与新的 createBrowsereRouter 一起使用?