无法读取未定义的属性'providesTags'

Question

我使用RTK查询通过api通过"useGetUserQuery"获得一个记录

Api调用是好的，因为后端有结果。我使用sequelize和我的结果发送数据对象。我试图删除提供标签，但我有同样的问题。

我的前端返回这个错误:

rtk-query.esm.js:771 Uncaught (in promise) TypeError: Cannot read property 'providesTags' of undefined
at calculateProvidedByThunk (rtk-query.esm.js:771)
at rtk-query.esm.js:908
at redux-toolkit.esm.js:603
at produce (immer.esm.js:1)
at redux-toolkit.esm.js:602
at Array.reduce (<anonymous>)
at redux-toolkit.esm.js:581
at combination (redux.js:528)
at reducer (rtk-query.esm.js:992)
at combination (redux.js:528)
at computeNextEntry (<anonymous>:3395:21)
at recomputeStates (<anonymous>:3429:17)
at <anonymous>:3809:22
at Object.dispatch (redux.js:288)
at dispatch (<anonymous>:3856:17)
at rtk-query.esm.js:1326
...
at rtk-query.esm.js:1418
at redux-toolkit.esm.js:386
at index.js:11
at redux-toolkit.esm.js:314
at dispatch (redux.js:659)
at redux-toolkit.esm.js:1144
at step (redux-toolkit.esm.js:38)
at Object.next (redux-toolkit.esm.js:19)
at fulfilled (redux-toolkit.esm.js:72)

我的RTK查询代码在这里:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import Cookie from 'js-cookie';
import React from 'react';
export interface User {
id: string
login: string
password: string
fonction: string
imageprofil: string  
...
}
React.useLayoutEffect = React.useEffect
type UsersResponse = User[]
export const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:8080/api/',
prepareHeaders: (headers) => {
const token = Cookie.get('token');   
if (token) {
headers.set('authorization', `Bearer ${token}`)
}
return headers
}, 
}),
tagTypes: 'User',
endpoints: (build) => ({
getUser: build.query<User, string>({
query: (id) => ({url:'users/'+id}),
providesTags: 'User',        
}),    
}),
}),
})
export const {         
useGetUserQuery        
} = api

Answer 1

首先，它应该是tagTypes: ['User'],，但这可能不是你在这里的问题。

我假设您的减速机没有安装在[api.reducerPath]或您有多个api(顺便说一句)。你应该只有一个，除非在极端罕见的情况下!)，它们都挂载在同一个键上，因为你没有为它们指定不同的reducerPath-从而相互覆盖。

Answer 2

也许我发现了谢谢@phry !

我的configurestore是不正确的。

之前

import { configureStore } from '@reduxjs/toolkit'
import { api } from '../features/post/post_api.ts'

export const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
})

后

import { configureStore } from '@reduxjs/toolkit'
import { api } from '../features/post/post_api.ts'
import {userapi} from '../features/user/user_api.ts'

export const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
[userapi.reducerPath]: userapi.reducer
},
// adding the api middleware enables caching, invalidation, polling and other features of `rtk-query`
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
})

Answer 3

https://redux-toolkit.js.org/api/getDefaultMiddleware

包含的默认中间件

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
thunk: {
extraArgument: myCustomApiService,
},
serializableCheck: false,
}),
})

Answer 4

我的错误是:我使用相同的reducerPath不止一次。(这就是为什么你不应该做ctr+c, ctr+v)