在 useEffect 中进行 redux 工具包查询

Question

我正在接收一个 cat 道具，并希望在使用 RTK 查询更改 cat 时从 api 获取数据。但是出现以下错误：

React Hook "useGetProductsQuery" cannot be called inside a callback".

每当cat 更改时如何创建RTK query？

const Products = ({cat,filter,sort}) => {

const [products, setproducts] = useState([])

const [filters, setFilters] = useState([])

useEffect(()=>{

                const {data,isError,isLoading}=useGetProductsQuery()
                console.log(data,isError,isLoading)

         },[cat])
}


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

const baseUrl=process.env.REACT_APP_ECOMMERCE_API_URL
const createRequest = (url) => ({ url });

export const ecommApi = createApi({
reducerPath: 'ecommApi',
baseQuery: fetchBaseQuery({baseUrl}),
endpoints: (builder) => ({
    getProducts: builder.query({
        query: () => createRequest("/api/v1/products")
    }),
  })
})


export const{useGetProductsQuery}=ecommApi;

Answer 1

为什么不直接将cat 作为参数传递给useQuery 钩子而不使用useEffect？

这将在每次cat 更改时发出一个新请求。

const {data,isError,isLoading}=useGetProductsQuery(cat)

Answer 2

作为对 phry 回答的补充：

如果 "cat" 可能未定义，请使用 skip 参数进行条件提取：

const {data,isError,isLoading} = useGetProductsQuery(cat, {skip: !cat})

见https://redux-toolkit.js.org/rtk-query/usage/conditional-fetching