我如何解構來自RTK查詢變異鉤子的錯誤？

我正在為我的資料獲取 API 使用 redux 工具包查詢。問題是我遇到的是錯誤處理 redux 工具包從查詢鉤子回傳一個錯誤屬性。因此，從服務器回傳的錯誤是一個帶有嵌套資料的物件，嘗試訪問它的內容在嘗試訪問錯誤物件中的資料時出現打字稿錯誤。

下面是我如何宣告我的突變鉤子

const [updateProgram, {
  isLoading: isUpdatingProgram,
  error: updateProgramError
}] = useUpdateProgramMutation();

下面是我如何嘗試訪問代碼中的錯誤。

onSubmit = {
  async(values, {
    setSubmitting
  }) => {
    await updateProgram({ ...values,
      id: 'programData.data._id'
    });
    refetch();

    if (updateProgramError) {
      enqueueSnackbar('Test message', {
        variant: 'error'
      });
      console.log(updateProgramError?.data?.message);
    }
    setSubmitting(false);
  }
}

現在我得到的打字稿錯誤如下。不是我能夠 console.log(updateProgramError) 是控制臺中的資料

Property 'data' does not exist on type 'FetchBaseQueryError | SerializedError'.
  Property 'data' does not exist on type 'SerializedError'.

{
  "status": 500,
  "data": {
    "status": "error",
    "message": "Something went very wrong!"
  }
}

下面是我如何實作 useUpdateProgramMutation()。

import { ndovuAPI } from './ndovuAPI';

export const ndovuProgramsAPI = ndovuAPI.injectEndpoints({
  endpoints: builder => ({
    getProgramById: builder.query({
      query: (id: string) => `/programs/${id}`,
      providesTags: ['Programs']
    }),
    getAllPrograms: builder.query({
      query: queryParams => ({ url: `/programs/`, params: queryParams }),
      providesTags: ['Programs']
    }),
    registerProgram: builder.mutation({
      query: body => ({
        url: '/programs',
        method: 'POST',
        body
      }),
      invalidatesTags: ['Programs']
    }),
    updateProgram: builder.mutation({
      query: body => ({ url: `/programs/${body.id}`, method: 'PATCH', body }),
      invalidatesTags: ['Programs']
    })
  }),
  overrideExisting: true
});

// Export hooks for usage in functional components
export const { useGetProgramByIdQuery, useGetAllProgramsQuery, useUpdateProgramMutation } = ndovuProgramsAPI;

uj5u.com熱心網友回復：

您撰寫的代碼不會按您想要的方式作業。您不能像這樣從 onSubmit 處理程式內部的鉤子中參考錯誤。你要做的是：

const onSubmit = async (values) => {
    try {
         // unwrapping will cause data to resolve, or an error to be thrown, and will narrow the types
        await updateProgram({ 
            ...values,
            id: 'programData.data._id'
        }).unwrap();
    // refetch(); // you should most likely just use tag invalidation here instead of calling refetch
    } catch (error) {
        // error is going to be `unknown` so you'll want to use a typeguard like:
        if (isMyKnownError(error)) { // add a typeguard like this
            enqueueSnackbar('Test message', {
                variant: 'error'
            });
        } else { 
        // You have some other error, handle it differently?
        }
    }
  }

參考：

• https://redux-toolkit.js.org/rtk-query/usage/mutations#frequently-used-mutation-hook-return-values

uj5u.com熱心網友回復：

從我可以從這個 TS 錯誤中推斷出， of 的型別updateProgramError似乎是 types 的聯合'FetchBaseQueryError'，'SerializedError'也可能是其他型別，這意味著 TS 僅假設您可以data在確保data物件中存在該屬性后安全地訪問該屬性。

換句話說，updateProgramError除非您進行一些檢查以確保，否則TS 不知道這些型別中的哪一種。

if (updateProgramError) {
  enqueueSnackbar('Test message', {
    variant: 'error'
  });
if ('data' in updateProgramError) console.log(updateProgramError.data.message);
}

標籤：反应 打字稿 rtk查询

上一篇：如何從Typescript中的物件陣列中獲取鍵的值？

下一篇：我的TypeScript按鈕沒有回應用戶輸入