动态比较两个Arrays.map值

Question

我有两个数组第一个数组Deals包含其中有交易清单dealId ， buyerId ， sellerId ，而在第二阵列Customer包含一个客户列表，其中有customerId ， name 。 我只想将Deal.sellerId与Customer.customerId进行比较，并想要显示Customer.name 。

不要将其与<DealDetail />混淆，它是一个具有sellerName属性的sellerName ，对于这个组件，我需要客户名称值。

交易数组：

this.state.updatedDeals.map(deal => <DealDetail key={deal.id} dealID={deal.id} sellerName={deal.sellerId} buyerName={deal.buyerId} />)

客户数组：

this.state.updatedCustomers.map(customer => <li key={customer.id} > {customer.name} </li>)>

我到底想要什么：

<DealDetail sellerName={deal.sellerId===customer.customerId ? customer.name} : "Unknown" />)

Answer 1

您可以尝试以下类似方法。

this.state.updatedDeals.map(
    (deal) =>
    { 
        const c =   this.state.updatedCustomers.filter(customer=>deal.sellerId===customer.id);
        <DealDetail 
            key={deal.id} 
            dealID={deal.id}        
            sellerName={c.length ==1 ? c[0].name:'unknown'} 
            buyerName={deal.buyerId} 
        />
    }
)

Answer 2

let updatedDeals = [
  {dealId: 10, buyerId: 1, sellerId: 26},
  {dealId: 11, buyerId: 1, sellerId: 26},
  {dealId: 12, buyerId: 1, sellerId: 27},
];

let updatedCustomers = [
  {customerId: 26, customerName: 'Isaac'},
  {customerId: 28, customerName: 'Jane'}
];

let DealDisplay = [];

updatedCustomers.forEach(cust => {
  if(updatedDeals.some(deal => deal.sellerId === cust.customerId)){
    DealDisplay.push(cust);
  }
});

为什么不分离逻辑以提高可维护性和可读性。 您可以将记录作为临时变量提取到单独的数组中。 然后使用变量渲染视图

Answer 3

从Firestore获取的数据：

updatedCustomers[doc.id] = doc.data();

并解决了以上问题：

this.state.updatedDeals.map(deal => (<DealDetail key={deal.id}

         sellerName={this.state.updatedCustomers[deal.sellerId].name}
         buyerName={this.state.updatedCustomers[deal.buyerId].name}

       />))