对反应表中的数据进行排序 - 不是按字母顺序排列，而是按特定顺序

Question

我是第一次使用 React，我想按“状态”列对数据进行排序，但不是按字母顺序，而是按特定顺序，比如 B、A、C，反之亦然。

我的数据如下：

export interface Delivery {
  id: number;
  name: string;
  amount: number;
  status: string;
  eta?: number;
}

export const getDeliveries = (): Promise<Delivery[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data = [
        {
          id: 1,
          name: "Delivery 1",
          amount: 3,
          status: "A",
          eta: 15
        },
        {
          id: 2,
          name: "Delivery 2",
          amount: 5,
          status: "C"
        },
        {
          id: 3,
          name: "Delivery 3",
          amount: 3,
          status: "A",
          eta: 10
        },
        {
          id: 4,
          name: "Delivery 4",
          amount: 4,
          status: "B"
        },
        {
          id: 5,
          name: "Delivery 5",
          amount: 3,
          status: "A",
          eta: 25
        },
        {
          id: 6,
          name: "Delivery 6",
          amount: 3,
          status: "C",
          eta: 5
        }
      ];

      resolve(data);
    }, 1000);
  });
};

感谢任何帮助或提示！

Answer 1

您可以使用带有自定义比较器的内置 Array.sort 对数据进行排序。

1. 定义状态字段的排序顺序。
2. 使用自定义比较器函数对数据数组进行排序，该函数根据您之前定义的状态顺序数组中的状态“值”比较两个数据点。

const data = [{
    id: 1,
    name: "Delivery 1",
    amount: 3,
    status: "A",
    eta: 15
  },
  {
    id: 2,
    name: "Delivery 2",
    amount: 5,
    status: "C"
  },
  {
    id: 3,
    name: "Delivery 3",
    amount: 3,
    status: "A",
    eta: 10
  },
  {
    id: 4,
    name: "Delivery 4",
    amount: 4,
    status: "B"
  },
  {
    id: 5,
    name: "Delivery 5",
    amount: 3,
    status: "A",
    eta: 25
  },
  {
    id: 6,
    name: "Delivery 6",
    amount: 3,
    status: "C",
    eta: 5
  }
];
const statusOrder = ["B", "A", "C"];

data.sort((d1, d2) => statusOrder.indexOf(d1.status) - statusOrder.indexOf(d2.status));

console.log(data);