无法读取未定义的属性(读取"无效标记")

Question

我正在尝试使用redux工具包RTK注册React应用程序我得到了这个错误:

TypeError: Cannot read properties of undefined (reading 'invalidatesTags')
at calculateProvidedByThunk (buildThunks.ts:629:1)
at handler (invalidationByTags.ts:31:1)
at index.ts:120:1
at index.ts:102:1
at index.ts:102:1
at index.js:20:1
at immutableStateInvariantMiddleware.ts:253:1
at dispatch (redux.js:691:1)
at createAsyncThunk.ts:682:1
at step (index.ts:4:1)

我使用查询的代码:

const Register = () => {
const [firstname, setFirstname] = useState("");
const [lastname, setLastname] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [cPassword, setCPassword] = useState("");
// const [ isLoading, setIsLoading ] = useState(false);
const [registerUser, { isLoading }] = useRegisterMutation();
const handleSubmit = async (e) => {
e.preventDefault();
if (password !== cPassword) {
// setIsLoading(false)
toast.error(`Passwords don't match`);
return;
}
const newUser = { firstname, lastname, email, password, role_id: 2 };
try {
const data = await registerUser(newUser).unwrap();
console.log(data);
} catch (err) {
console.log(err);
}
};
};

my authApi:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const authApi = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_API_ROOT_URL }),
endpoints: (builder) => ({
login: builder.mutation({
query: (body) => ({
url: "/users/login",
method: "post",
body,
}),
register: builder.mutation({
query: (body) => ({
url: "/users/register",
method: "post",
body,
}),
}),
resetPassword: builder.mutation({
query: (body) => ({
url: "/resetPassword",
method: "PATCH",
body,
}),
setNewPassword: builder.mutation({
query: (body, token) => ({
url: `/resetPassword/${token}`,
method: "PATCH",
body,
}),
}),
}),
}),
}),
});
export const {
useLoginMutation,
useRegisterMutation,
useResetPasswordMutation,
useSetNewPasswordMutation,
authApi,
};

另一个API (adminApi)具有相同的reducerPath (adminApi.js)

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const adminApi = createApi({
reducerPath: "api",
baseQuery: fetchBaseQuery({
baseUrl: process.env.REACT_APP_API_ROOT_URL,
prepareHeaders: (headers, { getState }) => {
const token = getState().auth.JWT;
if (token) {
headers.set("authorization", `Bearer ${token}`);
return headers;
}
},
}),
tagTypes: ["Categories", "Products", "Tva", "Product"],
endpoints: (builder) => ({
getCategoriesAdmin: builder.query({
query: () => "/categories/getAllAdmin",
providesTags: ["Categories", "Products"],
}),
getProductsAdmin: builder.query({
query: () => "/products/getAllAdmin",
providesTags: ["Categories", "Products"],
}),
getOneProductAdmin: builder.query({
query: (id) => `/products/getOneAdmin/${id}`,
}),
getTvaAdmin: builder.query({
query: () => "/TVA/getAllAdmin",
providesTags: ["Tva"],
}),
addProduct: builder.mutation({
query: (body) => ({
url: "/products/createOne",
method: "post",
body,
}),
invalidatesTags: ["Categories", "Products"],
}),
updateProductPut: builder.mutation({
query: (o) => ({
url: `/products/updateOnePut/${o.id}`,
method: "PUT",
body: o.body,
}),
invalidatesTags: ["Categories", "Products"],
}),
updateProductPatch: builder.mutation({
query: (o) => ({
url: `/products/updateOnePatch/${o.id}`,
method: "PATCH",
body: o.body,
}),
invalidatesTags: ["Categories", "Products"],
}),
}),
});
export const {
useGetCategoriesAdminQuery,
useGetTvaAdminQuery,
useGetProductsAdminQuery,
useAddProductMutation,
useUpdateProductPutMutation,
useUpdateProductPatchMutation,
useGetOneProductAdminQuery,
adminApi,
};

和我的商店

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import authReducer from "./slices/authSlice";
import adminReducer from "./slices/adminSlice";
import shopReducer from "./slices/shopSlice";
import { persistReducer, persistStore } from "redux-persist";
import thunk from "redux-thunk";
import storage from "redux-persist/lib/storage";
import { shopApi } from "./api/shopApi";
import { authApi } from "./api/authApi";
import { adminApi } from "./api/adminApi";
const persistConfig = {
key: "root",
storage,
};
const rootReducer = combineReducers({
auth: authReducer,
admin: adminReducer,
shop: shopReducer,
[authApi.reducerPath]: authApi.reducer,
[shopApi.reducerPath]: shopApi.reducer,
[adminApi.reducerPath]: adminApi.reducer,
});
const persistedReducer = persistReducer(persistConfig, rootReducer);
export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) => {
const allMiddleware = [
authApi.middleware,
shopApi.middleware,
adminApi.middleware,
thunk,
];
serializableCheck: false;
return getDefaultMiddleware({ serializableCheck: false }).concat(
...allMiddleware
);
},
});
export const persistor = persistStore(store);

每个get查询都工作良好，以及来自adminApi的post请求。registerMutation正在工作，用户是在DB上创建的，但我想知道为什么我得到这个错误。

有人能帮忙吗?

Thanks a lot

Answer 1

我也遇到了这个问题，我通过为reducerPath提供不同的名称来解决它。

如果我们提供相同的名称给reducerPath或不提供reducerPath，这个错误将被抛出。

Answer 2

我遇到了同样的问题，我找到了答案。该错误是由两个具有相同基础url的api引起的。检查在这里。

通常，应用程序需要与之通信的每个基本URL应该只有一个API片。例如，如果您的站点同时从/api/posts和/api/users获取数据，那么您将使用/api/作为基础URL的单个api切片，并为posts和用户单独定义端点。这允许您通过定义跨端点的标记关系来有效地利用自动重新抓取。

如果你想分开定义，看看这个网站。

我希望这个答案能解决你的问题。我不会说英语，所以请原谅我的英语很差。谢谢您的阅读。