React新手求助：如何找出无关联订单的客户

要找出没有订单的客户，不用嵌套遍历这么麻烦，先把有订单的客户ID整理出来，再逐个判断客户就行，还能避免重复渲染问题。

第一步：先收集有订单的客户ID #

先过滤掉customerid为空的无效订单，再把有效的客户ID存到Set里（Set的查找效率比数组高）：

// 从订单列表中提取所有有有效客户ID的集合
const customerIdsWithOrders = new Set(
  orderList.filter(order => order.customerid).map(order => order.customerid)
);

第二步：遍历客户列表判断状态 #

直接遍历客户数组，用上面的Set判断当前客户是否有订单，同时渲染结果：

{customerList.map(customer => {
  const hasNoOrders = !customerIdsWithOrders.has(customer.id);
  return (
    <p key={customer.id}>
      {hasNoOrders ? `${customer.firstname} 没有订单` : `${customer.firstname} 已有订单`}
    </p>
  );
})}

原代码的问题在哪？ #

你之前用嵌套map，会导致每个客户对应每一条订单都渲染一次——比如一个客户有3条订单，就会输出3次判断结果，完全不是你要的效果。而且你代码里的三元表达式没正确返回，if块里的内容也没在map中return出来，等于白写。

完整可运行示例 #

把逻辑整合到组件里的完整代码：

import React from 'react';

export class Customer {
  id: string = "";
  firstname: string = "";
}

export class Order {
  id: string = "";
  customerid: string = "";
}

const CustomerOrderChecker = () => {
  // 模拟测试数据
  const customerList: Customer[] = [
    { id: "1", firstname: "张三" },
    { id: "2", firstname: "李四" },
    { id: "3", firstname: "王五" }
  ];

  const orderList: Order[] = [
    { id: "o1", customerid: "1" },
    { id: "o2", customerid: "" }, // 空客户ID，忽略
    { id: "o3", customerid: "2" }
  ];

  // 生成有订单的客户ID集合
  const customerIdsWithOrders = new Set(
    orderList.filter(order => order.customerid).map(order => order.customerid)
  );

  return (
    <div>
      {customerList.map(customer => (
        <p key={customer.id}>
          {!customerIdsWithOrders.has(customer.id) 
            ? `${customer.firstname} 没有订单` 
            : `${customer.firstname} 已有订单`}
        </p>
      ))}
    </div>
  );
};

export default CustomerOrderChecker;

这样就能准确显示每个客户的订单状态，逻辑简洁，性能也更优。

内容的提问来源于stack exchange，提问作者Sami.C