Reactjs React redux 工具包 useGetFilterProductsQuery 和 useGetFilterProductsByCategoriesQuery 未定义为函数

我正在使用Redux工具包制作一个Reaction应用程序来进行状态管理，这里我收到了错误消息

app_api_apiSlice__WEBPACK_IMPORTED_MODULE_1_.useGetFilterProductsByCategoriesQuery 不是函数 ProductList@http://localhost:3000/static/js/bundle.js:781:108 RenderWithHooks@http://localhost:3000/static/js/bundle.js:33691:31 UpdateFunctionComponent@http://localhost:3000/static/js/bundle.js:36573:24 BeginWork@http://localhost:3000/static/js/bundle.js:38285:20 CallCallback@http://localhost:3000/static/js/bundle.js:23283:18 InvokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:23327:20 InvokeGuardedCallback@http://localhost:3000/static/js/bundle.js:23384:35 BeginWork$1@http://localhost:3000/static/js/bundle.js:43258:32 PerformUnitOfWork@http://localhost:3000/static/js/bundle.js:42505:16 WorkLoopSync@http://localhost:3000/static/js/bundle.js:42428:26 RenderRootSync@http://localhost:3000/static/js/bundle.js:42401:11 PerformSyncWorkOnRoot@http://localhost:3000/static/js/bundle.js:42093:38 FlushSyncCallbacks@http://localhost:3000/static/js/bundle.js:30123:26 FlushSyncCallbacksOnlyInLegacyMode@http://localhost:3000/static/js/bundle.js:30105:9 BatchedUpdates$1@http://localhost:3000/static/js/bundle.js:42149:11 BatchedUpdates@http://localhost:3000/static/js/bundle.js:23131:16 DispatchEventForPluginEventSystem@http://localhost:3000/static/js/bundle.js:27747:21 DispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://localhost:3000/static/js/bundle.js:25253:42 DispatchEvent@http://localhost:3000/static/js/bundle.js:25247:88 DispatchDiscreteEvent@http://localhost:3000/static/js/bundle.js:25224:22 EventListener.h和leEvent*addEventBubbleListener@http://localhost:3000/static/js/bundle.js:25446:14 AddTrappedEventListener@http://localhost:3000/static/js/bundle.js:27670:33 ListenToNativeEvent@http://localhost:3000/static/js/bundle.js:27614:30 ./node_modules/react-dom/cjs/react-dom.development.js/listenToAllSupportedEvents/&lt；@http://localhost:3000/static/js/bundle.js:27625:34 ListenToAllSupportedEvents@http://localhost:3000/static/js/bundle.js:27620:25 LegacyCreateRootFromDOMContainer@http://localhost:3000/static/js/bundle.js:45064:35 LegacyRenderSubtreeIntoContainer@http://localhost:3000/static/js/bundle.js:45088:16 Render@http://localhost:3000/static/js/bundle.js:45153:14 ./src/index.js@http://localhost:3000/static/js/bundle.js:959:50 Options.factory@http://localhost:3000/static/js/bundle.js:73591:31 webpack_require@http://localhost:3000/static/js/bundle.js:73036:33@http://localhost:3000/static/js/bundle.js:74173:56 @http://localhost:3000/static/js/bundle.js:74175:12

我的代码如下

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';


import { useGetProductsQuery, useGetFilterProductsQuery, useGetFilterProductsByCategoriesQuery } from '../../app/api/apiSlice';

import { useSelector } from 'react-redux';

function ProductList() {


  const selectedCategories = useSelector(state => state.filters.selectedCategories);
  const minPrice = useSelector(state => state.filters.minPrice);
  const maxPrice = useSelector(state => state.filters.maxPrice);


  let productQuery;

   if (minPrice && maxPrice) {
    alert(minPrice + " " + maxPrice);
    productQuery = useGetFilterProductsQuery(minPrice, maxPrice );
  } else if (selectedCategories.length > 0) {
    alert(selectedCategories);
    productQuery = useGetFilterProductsByCategoriesQuery(selectedCategories);
  } else {
    console.log(`It is working fine!`);
    productQuery = useGetProductsQuery();
  }
  

  const { data: products, isLoading, isError, isSuccess } = productQuery;


 
  if (isLoading) {
    return <p>Loading...</p>;
  }

  if (isError) {
    console.log('Error' + isError);
    return <p>Error fetching products</p>;
  }
  
    return (
      <Container>
        <h1 className="my-4">Product List</h1>
        <Row>
          {products.products.map((product) => (
            <Col key={product.id} xs={12} md={6} lg={4}>
              <Card className="mb-4">
                <Card.Img variant="top" src={product.image} alt={product.name} />
                <Card.Body>
                  <Card.Title>{product.name}</Card.Title>
                  <Card.Text>{product.description}</Card.Text>
                  <Card.Text>Price: ${product.price}</Card.Text>
                  <Button
                    variant="primary"
                    onClick={() => h和leAddToCart(product.id)}
                  >
                    Add to Cart
                  </Button>
                </Card.Body>
              </Card>
            </Col>
          ))}
        </Row>
      </Container>
    );

}

export default ProductList;

和

// Need to use the React-specific entry point to import createApi
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// Define a service using a base URL 和 expected endpoints
export const productApi = createApi({
  reducerPath: 'productApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:5000/' }),
   endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => 'product', // Change this to match your API endpoint for fetching products
    }),
    getCategory: builder.query({
      query: () => 'categories', // Change this to match your API endpoint for fetching products
    }),
   
    getfilterProducts: builder.query({
        query: ({minPrice,maxPrice}) => `/products/filterbypricerange?minPrice=${minPrice}&maxPrice=${maxPrice}`,
    }),
     
     getfilterProductsByCategories: builder.query({
      query: (categories) => `/products/categories=${categories}`,
     }),  
  }),
})

// Export hooks for usage in functional components, which are
// auto-generated based on the defined endpoints
export const { useGetProductsQuery,useGetCategoryQuery, useGetFilterProductsQuery,useGetFilterProductsByCategoriesQuery } = productApi;

帮助我解决代码中的错误