如何在React单商品组件中正确使用Redux Toolkit Query？

以下针对你提供的代码，梳理问题并给出修正方案：

1. 后端路由代码 #

const express = require('express');

const productroute = express.Router();

const {getallproducts, getsingleproduct} = require('../controller/productscontroller')

productroute.get('/shop', getallproducts)

productroute.get('/shop/:id', getsingleproduct)

module.exports = productroute

2. 前端RTK-Query配置代码 #

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

export const productApi = createApi({
  reducerPath: "productApi",
  baseQuery: fetchBaseQuery({baseUrl: "http://localhost:5000"}),
  endpoints: ((builder)=>({
    getAllProducts: builder.query({
      query: () => "/shop"
    }),
    getSingleProduct: builder.query({
      query: id => `/shop/${id}`
    })
  }))
})

3. App.js路由配置代码 #

<Route path='/about' element={<About />} />
<Route path='/' element={<SharedProductLayout />}>  
  <Route path='/shop' element={<Shop />} />
  <Route path='/shop/:Id' element={<Prodparams />} /> 
</Route>

4. RTK Query Hooks导出代码 #

export const {
  useGetAllProductsQuery, 
  useGetSingleProductQuery
} = productApi;

5. 单商品组件问题修正 #

你的Prodparams组件存在3个核心问题：调用useGetSingleProductQuery未传参、未处理加载/错误/数据未就绪状态、错误使用find方法（后端已返回单商品），以下是修正后的代码：

修正后的组件代码 #

import { useParams, Link } from 'react-router-dom';
import { useGetSingleProductQuery } from './path-to-your-api-file'; // 替换为你的api文件实际路径
import { Container, Row, Col } from 'react-bootstrap';
import { BsStarFill } from 'react-icons/bs';

const Prodparams = () => {
  const { Id } = useParams();
  // 传入路由参数作为请求id
  const { data: product, isLoading, error } = useGetSingleProductQuery(Id);

  // 处理加载中状态
  if (isLoading) return <div>加载中...</div>;
  
  // 处理请求错误
  if (error) return <div>商品加载失败：{error.message}</div>;
  
  // 处理无数据情况
  if (!product) return <div>未找到对应商品</div>;

  // 直接解构单商品数据（后端已返回单个商品对象）
  const { _id, image, prodcat, heading, price, ratings, discription, AddCart, BuyCart } = product;
  
  return (
    <div className="blog">  
      <Container>
        <Row>
          <Col md={6} id={_id} className="bg- ">
            <div className="img">
              <img src={image} className='img-fluid' alt={heading} />
            </div>
          </Col>

          <Col md={6} className="bg-">
            <div className="p-dist">   
              <p className='product-category'>{prodcat}</p>
              <h2 className='heading'>{heading}</h2>
              <small className='ratings text-center'>
                {ratings}
                <BsStarFill />
              </small>
              <h4 className='price'>{price}</h4>
              <p className='discription'>{discription}</p>
              <Link to='/cart'>
                <button className='add-cart mx-2'>
                  {AddCart}
                </button>
              </Link>
              <Link to='/checkout'>
                <button className='buy-cart mx-2'>
                  {BuyCart}
                </button>
              </Link>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  )
}
 
export default Prodparams

关键修正说明 #

• 调用useGetSingleProductQuery时传入路由参数Id，确保请求能命中后端/shop/:id路由
• 增加加载中、错误、无数据的状态处理，避免组件渲染时因数据未就绪报错
• 直接使用后端返回的单商品对象，无需调用find方法（需确保后端getsingleproduct控制器返回单个商品对象而非数组）

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