2

我正在我的一个项目中测试 rtk-query 并且有一个问题我不明白什么时候网站加载第一次查询工作并且接收到数据但是当我尝试更新或创建我在 redux 开发工具中获得的任何内容时突变状态被拒绝，但是当我刷新网站并再次尝试时，它会起作用，因此仅当网站第一次加载时才会出现问题，这是我的代码

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

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

const auth = JSON.parse(localStorage.getItem('auth'));

export const crudApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: import.meta.env.VITE_APP_API,
    // prepareHeaders: (headers) => {
    //   console.log(headers);
    // },
  }),
  endpoints: (builder) => ({
    getList: builder.query({
      query: (path) => ({
        url: `${path}/list`,
      }),
    }),
    checkCopon: builder.mutation({
      query: (code) => ({
        url: `copon/check`,
        body: { code },
        method: 'POST',
      }),
    }),
    filterDishes: builder.mutation({
      query: (tags) => ({
        url: `dish/filter`,
        body: { tags },
        method: 'POST',
      }),
    }),
    getTodaysOrders: builder.query({
      query: () => ({
        url: `order/todayList`,
        body: { today: true },
        method: 'POST',
      }),
    }),
    getSingle: builder.query({
      query: ({ path, id }) => {
        console.log(path, id);
        return {
          url: `${path}/get`,
          body: { id },
          method: 'POST',
        };
      },
    }),
    listOrderByUser: builder.query({
      query: (id) => {
        console.log(id);
        return {
          url: `order/listByUser`,
          body: { id },
          method: 'POST',
        };
      },
    }),
    docUpdate: builder.mutation({
      query: (body) => {
        console.log(body);
        return {
          url: `${body.path}/update`,
          body: body,
          method: 'POST',
          headers: {
            Authorization: 'Bearer ' + auth.token,
          },
        };
      },
    }),
    Add: builder.mutation({
      query: (body) => {
        console.log(body);

        return {
          url: `${body.path}/add`,
          body: body,
          method: 'POST',
          headers: {
            Authorization: 'Bearer ' + auth.token,
          },
        };
      },
    }),
    Delete: builder.mutation({
      query: (body) => {
        console.log(body);
        console.log(`${body.path}/delete`);
        return {
          url: `${body.path}/delete`,
          body: { ids: body.ids },
          method: 'POST',
        };
      },
    }),
  }),
});

// Export hooks for usage in functional components
export const {
  useListOrderByUserQuery,
  useGetListQuery,
  useGetSingleQuery,
  useDocUpdateMutation,
  useDeleteMutation,
  useAddMutation,
  useGetTodaysOrdersQuery,
  useCheckCoponMutation,
  useFilterDishesMutation,
} = crudApi;

如果有人可以帮助我不胜感激，我不想重写所有代码来修复它

4

1 回答 1

3

devtools 中被拒绝的操作可能意味着很多事情，包括“我们不需要对该数据发出新请求，因为它已经在缓存中”。

您将通过进一步检查该操作来获得更多信息（尤其是action.meta- 如果action.meta.condition是true，那么就像我说的那样，不需要新的请求），或者只是看看error您从调用钩子中得到的结果。

但是如果没有关于错误的更多信息（如果有的话），就不可能说得更多。

于 2021-07-13T20:19:20.413 回答