ReactTS开发中如何统计接口返回对象内pieces数组长度并新增统计字段

你可以直接在拿到接口响应后、调用handleServerResponse之前对返回数据做遍历加工，具体实现如下：

步骤1：修改Action层代码 #

// 先定义数据项的TS类型，避免类型报错，可根据实际业务字段补全
interface DropOffOrderItem {
  id: number;
  trackingId: string;
  documentLink: string | null;
  createdAt: string;
  originNode: {
    id: number;
    name: string;
  };
  orders: Array<{
    id: number;
    trackingId: string;
    address: string;
    zipCode: string;
    province: string;
    state: string;
    generatedShipment: boolean;
    shipper: any;
    pieces: Array<{id: number}>;
  }>;
  container: any;
  // 新增统计字段的类型声明
  piecesTotal: number;
}

// 原有接口请求逻辑
const response = await dropOffService
  .getDropOffOrders(
    page,
    count,
    filters,
    sorting,
  );
// 修正原代码变量名不一致的问题，判断接口响应是否有效
if (!response) return;

// 新增数据加工逻辑
const processedResponse = {
  ...response,
  data: response.data.map((item: Omit<DropOffOrderItem, 'piecesTotal'>) => {
    // 累加当前项所有订单下的pieces数组总长度
    const total = item.orders.reduce((sum, order) => sum + order.pieces.length, 0);
    // 拼接新字段返回新对象，不修改原数据
    return {
      ...item,
      piecesTotal: total
    }
  })
}

// 把加工后的数据传给后续处理逻辑
handleServerResponse(Action.LIST, { dropOffOrdersResponse: processedResponse }, dispatch);

注意事项 #

• 如果你不需要严格的TS校验，也可以去掉类型声明直接处理，不过更推荐补全类型避免后续开发出现类型错误
• 示例中新增的字段名是小驼峰piecesTotal，如果你需要全大写的PIECESTOTAL直接修改返回时的键名即可
• 加工逻辑不会修改原接口返回的其他字段，完全符合你要在container字段下方新增统计字段的需求

内容的提问来源于stack exchange，提问作者Young Al Capone