redux RTK查询生成钩子与属性“不存在于类型”错误在React与TypeScript

vohkndzv  于 2023-05-29  发布在  React
关注(0)|答案(1)|浏览(114)

我将我的todo列表从Redux Toolkit修改为RTK Query,并且在todoApi组件中,当导出RTK本身创建的钩子时,负责RTK Query的主要功能,在每个钩子上方出现错误Property 'useFetchTodosQuery' doesn 't exist on type '{ fetchTodos:ApiEndpointQuery<QueryDefinition<void,BaseQueryFn<string| FetchArgs,unknown,FetchBaseQueryError,{},FetchBaseQueryMeta>,never,Todo[],“todoApi”>,{ ..; }>; addTodo:ApiEndpointMutation<...>; removeTodo:ApiEndpointMutation<...>; } & { ...}'. ts(2339)
在我看来,出现错误是因为依赖关系中的一些错误。我已经尝试了所有我知道的方法,更新并重新安装了与redux,react,ts相关的所有内容。我甚至尝试将npm更改为yarn并重新安装所有内容,但没有任何方法可以修复这个错误。我还花了几个小时的通信与GPT-4调试与他关于重新安装和一切,他基本上放弃了太。我真的希望有人遇到这个错误或知道如何修复它。非常感谢我在下面的代码。todoApi:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export interface Todo {
    userId: number,
    id: number,
    title: string,
    completed: boolean
}

export const todoApi = createApi({
  reducerPath: 'todoApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3004/' }),
  endpoints: (builder) => ({
    fetchTodos: builder.query<Todo[], void>({
      query: () => 'todos',
    }),
    addTodo: builder.mutation<Todo, Partial<Todo>>({
      query: (newTodo) => ({
        url: 'todos',
        method: 'POST',
        body: newTodo,
      }),
    }),
    removeTodo: builder.mutation<void, number>({
      query: (todoId) => ({
        url: `todos/${todoId}`,
        method: 'DELETE',
      }),
    }),
  }),
});

export const {useFetchTodosQuery, useAddTodoMutation, useRemoveTodoMutation,} = todoApi.endpoints;

店铺:

import { configureStore } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import { todoApi } from './todoApi';

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

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch: () => AppDispatch = useDispatch;

export default store;
6ju8rftf

6ju8rftf1#

这些钩子存在于api上,而不是api.endoints上:

export const {useFetchTodosQuery, useAddTodoMutation, useRemoveTodoMutation,} = todoApi;

相关问题