React中fetch获取模拟数据报错及订单排序实现问题

你遇到的异常由两个核心错误导致：

• 误用原生fetch()方法：getOrders()本身是返回Promise的本地模拟数据方法，不需要套fetch（fetch的第一个参数要求传入请求URL，你传入Promise对象后，参数会被强制转为字符串[object Promise]，最终请求地址变成当前域名拼接该字符串，才会出现控制台里csb.app/[object%20Promise]的异常响应）
• 代码存在其他逻辑问题：TS类型定义不匹配、state初始类型错误、未实现排序逻辑、未正确渲染表格行内容

按以下步骤调整即可：

1. 移除多余的fetch包装，直接await调用getOrders()获取原始订单数据
2. 修正network.ts里的类型定义，统一接口避免TS报错
3. 实现排序规则：

• 给status设置排序权重：active优先级最高（权重0），其次是upcoming（权重1），最后是pending（权重2）
• 状态相同的条目，有eta字段的按数值升序排列，无eta字段的排到同状态条目末尾

4. 修正state初始值为Order数组类型，排序完成后再存入state
5. 遍历排序后的订单数据渲染表格行，无eta的单元格用-占位

network.ts #

export interface Order {
  id: number;
  name: string;
  amount: number;
  status: "active" | "upcoming" | "pending";
  eta?: number;
}

export const getOrders = (): Promise<Order[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const data: Order[] = [
        { id: 1, name: "Order 1", amount: 3, status: "active", eta: 15 },
        { id: 2, name: "Order 2", amount: 5, status: "pending" },
        { id: 3, name: "Order 3", amount: 3, status: "active", eta: 10 },
        { id: 4, name: "Order 4", amount: 4, status: "upcoming" },
        { id: 5, name: "Order 5", amount: 3, status: "active", eta: 25 },
        { id: 6, name: "Order 6", amount: 3, status: "active", eta: 5 }
      ];
      resolve(data);
    }, 1000);
  });
};

组件代码 #

import React, { useState, useEffect } from "react";
import { getOrders, Order } from "./network";

export const Component: React.FC = () => {
  const [searchResults, setSearchResults] = useState<Order[]>([]);
  
  useEffect(() => {
    fetchResults();
  },[]);

  const fetchResults = async() => {
    try {
      const rawData = await getOrders();
      // 配置状态排序权重
      const statusWeight: Record<Order["status"], number> = {
        active: 0,
        upcoming: 1,
        pending: 2
      };
      // 对数据做排序，不修改原数组
      const sortedData = [...rawData].sort((a, b) => {
        // 优先按状态优先级排序
        const statusRankDiff = statusWeight[a.status] - statusWeight[b.status];
        if (statusRankDiff !== 0) return statusRankDiff;
        // 同状态按eta升序，无eta的排到最后
        const aEtaVal = a.eta ?? Infinity;
        const bEtaVal = b.eta ?? Infinity;
        return aEtaVal - bEtaVal;
      });
      setSearchResults(sortedData);
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <table className="table table-striped table-hover">
      <thead className="thead-dark">
        <tr>
          <th scope="col">ID</th>
          <th scope="col">Name</th>
          <th scope="col">Amount</th>
          <th scope="col">ETA</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      <tbody>
        {searchResults.map(order => (
          <tr key={order.id}>
            <td>{order.id}</td>
            <td>{order.name}</td>
            <td>{order.amount}</td>
            <td>{order.eta ?? "-"}</td>
            <td>{order.status}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

数据加载完成后渲染顺序为：

1. active状态按eta升序：Order 6（eta:5）→ Order 3（eta:10）→ Order 1（eta:15）→ Order 5（eta:25）
2. upcoming状态：Order 4（无eta）
3. pending状态：Order 2（无eta）

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