如何在Django REST Framework+React项目同一页面渲染两个QuerySet？

问题根源 #

你当前的核心问题是后端DRF接口把两个独立的查询结果数组合并为一个扁平数组返回，前端无法从混合后的结果中自动区分全量最新商品、自行车分类商品的边界，自然无法单独提取自行车分类的数组做遍历渲染。

第一步：修改后端DRF接口返回结构 #

不要合并两个序列化后的数组，改为返回包含两个独立字段的JSON对象，分别对应两组商品数据，示例代码如下：

# 修正后的视图逻辑
from rest_framework.response import Response
from rest_framework.decorators import api_view
from .models import Product
from .serializers import ProductSerializer

@api_view(['GET'])
def getProducts(request):
    # 全量最新商品，可按你的业务需求加排序规则
    latest_products = Product.objects.all().order_by('-create_time')
    # 分类为自行车的商品
    bike_products = Product.objects.filter(category=1)
    # 直接返回带独立字段的对象，不合并数组
    return Response({
        "latest_products": ProductSerializer(latest_products, many=True).data,
        "bike_products": ProductSerializer(bike_products, many=True).data
    })

第二步：适配前端React+Redux逻辑 #

Redux层修改 #

调整商品相关的reducer存储结构，分别存储两组商品数据：

// 商品模块reducer示例
const initialState = {
  latestProducts: [],
  bikeProducts: [],
  loading: false,
  error: null
}

export default function productReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_PRODUCTS_SUCCESS':
      return {
        ...state,
        latestProducts: action.payload.latest_products,
        bikeProducts: action.payload.bike_products,
        loading: false
      }
    // 其他action逻辑（加载中、失败等）保持不变
    default:
      return state
  }
}

组件渲染层修改 #

在页面组件中直接从Redux取出两个独立数组，分别做map遍历渲染即可：

import { useSelector } from 'react-redux'
import ProductCard from '@/components/ProductCard'

export default function Home() {
  const { latestProducts, bikeProducts } = useSelector(state => state.product)

  return (
    <div className="home-container">
      {/* 最新商品区块 */}
      <section className="latest-section">
        <h2>最新上架</h2>
        <div className="product-grid">
          {latestProducts.map(product => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>

      {/* 自行车分类商品区块 */}
      <section className="bike-section">
        <h2>自行车专区</h2>
        <div className="product-grid">
          {bikeProducts.map(product => (
            <ProductCard key={product.id} product={product} />
          ))}
        </div>
      </section>
    </div>
  )
}

临时替代方案（不推荐长期使用） #

如果你暂时不方便修改后端接口，可以用前端过滤的方式从合并数组中筛选出自行车分类商品，但该方案会浪费带宽，且分类规则变更时需要同步修改前端逻辑：

// 从全量合并的商品数组中过滤分类为1的商品
const bikeProducts = allProducts.filter(product => product.category === 1)

内容的提问来源于stack exchange，提问作者Sohanur Rahman Shanto 16209570