基于 Sequelize 的多条件排序导致 UI 刷新异常的解决方案-js教程-PHP中文网

基于 Sequelize 的多条件排序导致 UI 刷新异常的解决方案

DDD

发布： 2025-09-26 17:03:01

原创

733人浏览过

基于 sequelize 的多条件排序导致 ui 刷新异常的解决方案

在使用 Sequelize 进行数据查询时，多条件排序可能会导致 UI 刷新出现异常，例如数据顺序错乱。这是因为在包含关联模型且关联模型也参与排序的情况下，如果关联模型的数据没有明确的排序规则，Sequelize 的查询结果可能是不稳定的。本文将深入探讨这一问题，分析其产生的原因，并提供一种解决方案，通过明确指定排序字段，确保数据顺序的稳定性和一致性，从而解决 UI 刷新异常的问题。

问题分析

在使用 Sequelize 查询数据时，如果涉及到关联模型，并且在 order 选项中同时对主模型和关联模型进行排序，可能会出现数据顺序不稳定的情况。

在提供的示例代码中，查询 Recipe 模型时，包含了 Tag 关联模型，并且使用了 where 条件过滤 Tag。同时，order 选项中只指定了 createdAt 字段的降序排序。

const recipes = await db.Recipe.findAll({
  include: [
    Ingredient,
    { model: User, as: "creator" },
    { model: Tag, where: { ...whereConditionTags } },
    Comment,
    { model: User, as: "reactionUser" },
  ],
  order: [["createdAt", "DESC"]],
  where: {
    ...whereConditionName,
  },
  offset: startIndex,
  limit: limit,
});

登录后复制

当向数据库中添加新的评论或菜谱时，由于 Tag 表中的数据没有明确的排序规则，Sequelize 在每次查询时可能会以不同的顺序返回 Tag 数据。这会导致最终的查询结果在排序上出现差异，从而导致 UI 刷新时数据顺序错乱。

解决方案

为了解决这个问题，我们需要在 order 选项中更明确地指定排序规则，包括关联模型的排序字段。

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

204

查看详情

修改后的 order 选项如下：

order: [
  ["createdAt", "DESC"],
  [{ model: Tag }, "createdAt", "DESC"],
],

登录后复制

这个修改后的 order 选项首先按照 Recipe 模型的 createdAt 字段进行降序排序，然后按照 Tag 模型的 createdAt 字段进行降序排序。通过明确指定 Tag 模型的排序字段，可以确保每次查询时 Tag 数据的顺序是稳定的，从而解决 UI 刷新时数据顺序错乱的问题。

代码示例

以下是完整的修改后的代码示例：

getAllPaginated: async (
  startIndex,
  endIndex,
  limit,
  page,
  tag,
  nameRecipe
) => {
  let whereConditionTags = {};
  let whereConditionName = {};

  if (tag) {
    Array.isArray(tag) && (whereConditionTags = { name: { [Op.in]: tag } });

    !Array.isArray(tag) &&
      (whereConditionTags = { name: { [Op.startsWith]: tag } });
  }
  if (nameRecipe) {
    whereConditionName = { name: { [Op.startsWith]: nameRecipe } };
  }

  const recipes = await db.Recipe.findAll({
    include: [
      Ingredient,
      { model: User, as: "creator" },
      { model: Tag, where: { ...whereConditionTags } },
      Comment,
      { model: User, as: "reactionUser" },
    ],
    order: [
      ["createdAt", "DESC"],
      [{ model: Tag }, "createdAt", "DESC"],
    ],
    where: {
      ...whereConditionName,
    },
    offset: startIndex,
    limit: limit,
  });
  return recipes.map((r) => new RecipeDTO(r));
},

登录后复制