使用Redux Query发起Get请求失败，请求排查问题原因

我尝试用Redux Query的builder.query实现GET请求拉取API数据，但在组件中使用对应钩子时触发报错；改成builder.mutation并使用Mutation钩子就能正常获取数据，想知道哪里操作有误。

相关代码 #

API定义代码 #

export const userCartApi = api.injectEndpoints({
 endpoints: (builder)=>({
    getCart: builder.query({
        query: ()=>{
            return{
                url: "/cart",
                method: "get",
            };
        },
    }),
}),
overrideExisting: false
});

组件使用代码 #

export const {useGetCartQuery } = userCartApi

import { useGetCartQuery } from "../../store/Features/CartApi/CartApi";
const [getCart, {data: cartData, isError: isCartError, isSuccess: isCartSuccess, error: 
 getCartEror, isLoading: isCartLoading,}] = useGetCartQuery();

const getCart = async()=>{
    await getCart()
 }

Store配置代码 #

export const Store = configureStore({
reducer:{
    [userApi.reducerPath]: userApi.reducer,
    [userCartApi.reducerPath]: userCartApi.reducer,
    session: sessionSlice,
    appLoader: appLoaderSlice,
    cart: cartReducer,
    user: userSlice,
},
middleware: (getDefaultMiddleware)=> getDefaultMiddleware().concat(userApi.middleware)
});

错误信息 #

Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.

解决方案 #

核心问题是Redux Query的Query钩子与Mutation钩子返回值结构完全不同：

• Mutation钩子返回的是[触发函数, 状态对象]的数组，所以你之前用数组解构是正确的；
• Query钩子返回的是包含数据、状态的对象，不能用数组解构，这就是你报错的原因。

另外，Query钩子默认会自动发起请求，不需要手动定义触发函数，你代码里的getCart函数不仅多余，还和解构出来的变量重名，会引发额外问题。

修正后的组件代码：

import { useGetCartQuery } from "../../store/Features/CartApi/CartApi";

// 用对象解构替代数组解构
const { 
  data: cartData, 
  isError: isCartError, 
  isSuccess: isCartSuccess, 
  error: getCartError, 
  isLoading: isCartLoading 
} = useGetCartQuery();

// 不需要手动定义getCart触发函数，Query会自动执行请求

内容的提问来源于stack exchange，提问作者kingsJayson