如何动态匹配Deals与Customers数组，为DealDetail组件设置sellerName？

嘿，我来帮你搞定这个字段匹配的问题！你现在需要把Deals数组里的sellerId和Customers数组的customerId对应上，拿到对应的客户名称传给<DealDetail />，没匹配到就显示"Unknown"对吧？

问题分析 #

你现在的代码里直接把deal.sellerId传给了sellerName，这显然不是你要的名称字段。如果每次在map交易数组的时候都遍历一遍客户数组去找匹配，效率会很低，尤其是数据量大的时候。更好的方式是先把客户数组转成一个键值对映射，这样查找起来只需要O(1)的时间。

解决方案 #

首先，在你的组件render方法里，先把updatedCustomers转成一个以customerId为键、name为值的对象：

// 在render函数开头添加这段代码
const customerMap = this.state.updatedCustomers.reduce((acc, customer) => {
  acc[customer.customerId] = customer.name;
  return acc;
}, {});

然后修改你原来的交易数组遍历代码，用这个映射来快速获取对应的名称：

this.state.updatedDeals.map(deal => (
  <DealDetail 
    key={deal.dealId} // 注意：你的Deals字段是dealId，不是id，这里要修正避免key错误
    dealID={deal.dealId} 
    sellerName={customerMap[deal.sellerId] || "Unknown"} 
    buyerName={customerMap[deal.buyerId] || "Unknown"} // 买家名称也可以用同样的方式处理哦
  />
))

为什么这么做？ #

• 用reduce把数组转成对象映射，只需要遍历一次客户数组，之后每次查找名称都是直接通过键取值，比每次遍历数组高效太多。
• 用|| "Unknown"的方式，当找不到对应id的时候，会自动 fallback 到"Unknown"，完美符合你的需求。
• 顺便修正了你代码里的小问题：原来的key={deal.id}应该是deal.dealId，因为你的Deals数组里的字段是dealId，这样能保证key的唯一性。

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