如何在TypeScript+React中对映射元素按嵌套字段排序？

核心修正：正确引用嵌套的amount字段 #

你当前的排序代码仅写到price层级，未深入到amount字段，且使用any会丢失TypeScript的类型校验。直接修改排序逻辑即可：

actualData.sort((a, b) => {
  // 按价格升序排序，若要降序则返回 b.value.price.amount - a.value.price.amount
  return a.value.price.amount - b.value.price.amount;
});

优化类型校验（推荐） #

为避免any带来的类型风险，可给排序参数指定明确类型。结合返回的JSON结构（每个元素包含value字段），先定义包裹类型：

type FlightResponseItem = {
  value: ConversionData;
};

再修改数据处理部分的代码，同时修正setResult的赋值逻辑，让类型完全匹配：

let actualData = await response.json() as FlightResponseItem[];
actualData.sort((a: FlightResponseItem, b: FlightResponseItem) => {
  return a.value.price.amount - b.value.price.amount;
});
// 提取value字段组成数组，直接匹配ConversionData[]类型
setResult(actualData.map(item => item.value));

完整修正后的useEffect代码 #

useEffect(() => {
  const getData = async () => {
    try {
      const response = await fetch("http://localhost:3001/flights");
      if (!response.ok) {
        throw new Error(
          `This is an HTTP error: The status is ${response.status}. Please refresh the page`
        );
      }
      type FlightResponseItem = {
        value: ConversionData;
      };
      let actualData = await response.json() as FlightResponseItem[];
      // 按价格升序排序
      actualData.sort((a, b) => a.value.price.amount - b.value.price.amount);
      setResult(actualData.map(item => item.value));
      setError(null);
    } catch (err: any) {
      setError(err.message);
      setResult(null as unknown as ConversionData[]);
    } finally {
      setLoading(false);
    }
  };
  getData();
}, []);

关键注意点 #

• Array.sort()依赖排序函数返回的数字差值判断顺序：返回负数则a排在b前（升序），返回正数则b排在a前（降序），返回0则顺序不变。
• 若返回数据中存在price或amount为undefined的情况，建议添加空值判断避免报错：

  actualData.sort((a, b) => {
    const priceA = a.value?.price?.amount ?? Infinity;
    const priceB = b.value?.price?.amount ?? Infinity;
    return priceA - priceB;
  });
  

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