動態比較兩個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}

       />))