Django Rest Framework搭配React时按Stocks表date字段排序失效问题

问题根因 #

你的渲染逻辑优先级是先按productsInfo的顺序遍历产品，再匹配每个产品对应的库存记录，因此即使stocksInfo本身已经按date正确排序，最终渲染的列表顺序由产品顺序决定，仅同个产品下的库存记录会保持date排序，跨产品的记录顺序会不符合预期。

解决方案 #

方案1：前端合并数据后整体排序（改造成本最低） #

先把库存数据和关联的产品信息合并为单个数组，整体按date排序后再渲染：

// 合并关联数据并全局排序
const mergedStockList = stocksInfo.map(stock => {
  const matchedProduct = productsInfo.find(p => p.product_id === stock.product_id)
  return {
    ...stock,
    productName: matchedProduct?.name ?? '-'
  }
// 日期排序，字符串格式日期会自动转时间戳比较
}).sort((a, b) => new Date(a.date) - new Date(b.date))

然后直接遍历排序后的合并列表渲染：

{mergedStockList.map((item, index) => (
  // 建议把key替换为stock表的唯一主键，避免列表变动时渲染异常
  <tr key={item.id ?? index} className="table-data">
    <td className="col-3">{item.productName}</td>
    <td className="col-3">{item.date}</td>
    <td className="col-1">{item.count}</td>
  </tr>
))}

方案2：后端直接返回带产品信息的排序数据（性能更优） #

修改Django序列化器，直接在库存接口返回关联的产品名称，前端无需二次关联，避免顺序错乱：

# 序列化器新增关联产品名称字段
class StocksSerializer(serializers.ModelSerializer):
    product_name = serializers.CharField(source='product.name', read_only=True)
    class Meta:
        model = Stocks
        # 把product_name加入返回字段列表
        fields = ['id', 'date', 'count', 'product_id', 'product_name']

前端直接遍历接口返回的stocksInfo即可，无需再关联productsInfo。

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