React.js后台管理页面实现职位数据指定排序的方案咨询

Hi there！针对你遇到的需求，我给你提供两种可行的方案，你可以根据实际场景选择：

方案一：前端硬编码固定排序（适合不需要频繁调整顺序的场景） #

如果客户端要求的职位顺序是固定不变的，我们可以直接在前端定义一个优先级列表，获取数据后按照这个列表排序：

1. 先定义职位的顺序规则，把需要优先展示的职位放在前面：

// 根据你的需求自定义职位排序顺序
const positionPriority = [
  'Executive Director',
  '你需要的第二个职位',
  '第三个职位',
  // ... 其他职位依次添加
];

2. 修改你获取数据的逻辑，在设置状态前对数据进行排序：

const getManagementData = async () => {
  try {
    await fetchRequest({
      method: 'GET',
      path: 'resource/about-us/management',
    }).then((response) => {
      if (!response.error) {
        // 核心：对获取到的管理数据按职位顺序排序
        const sortedManagementData = (response.management || []).sort((itemA, itemB) => {
          // 获取当前职位在优先级列表中的索引
          const indexA = positionPriority.indexOf(itemA.otherData.position);
          const indexB = positionPriority.indexOf(itemB.otherData.position);
          // 把不在列表中的职位放到最后
          const aSortIndex = indexA === -1 ? positionPriority.length : indexA;
          const bSortIndex = indexB === -1 ? positionPriority.length : indexB;
          return aSortIndex - bSortIndex;
        });
        setManagementData(sortedManagementData);
      } else {
        message.error(response.error.message);
      }
    });
  } catch (error: any) {
    message.error(error.message);
  }
};

这样页面渲染的时候，Table就会按照你定义的职位顺序展示了。

方案二：通过后端添加排序字段（适合需要动态调整顺序的场景） #

如果以后客户端可能需要经常修改职位顺序，那么前端硬编码就不太方便了。这时候建议让后端同事给management数据表添加一个sort_order（数字类型）字段，每个职位设置对应的排序值（比如Executive Director设为1，下一个职位设为2，以此类推）。

后端返回数据时带上这个字段，前端只需要按照这个数字排序即可：

const sortedManagementData = (response.management || []).sort((itemA, itemB) => {
  // 假设后端返回的字段名为sortOrder
  return itemA.sortOrder - itemB.sortOrder;
});

这种方案的好处是以后要调整顺序，直接在后台修改每个职位的排序数值就行，不用改动前端代码，扩展性更好。

你可以根据实际需求选择其中一种方案，希望能帮到你！

备注：内容来源于stack exchange，提问作者Esther