顯示地圖函式內另一個陣列的資料

我有兩個陣列：

const Array1 = [ 
{id:1, sold: 69,  productName: 'Epic' image: 'someimage.svg' } ,
{id:2, sold: 121,  productName: 'Legend' image: 'someimage.svg' } ,
{id:3, sold: 368,  productName: 'Top' image: 'someimage.svg' }
]

const Array2 = [ 
{ productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } ,
{ productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } ,
{ productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' }
]

我想在我JSX的資料中顯示他們倆的資料。我嘗試了一下Array.mapin map，但這不是我想要的解決方案。

JSX

...
return (
    <> 
     {
       Array1.map((dataFromFirstArray) => 
        Array2.map((dataFromSecondArray) => (
          <div>
            <img src={dataFromFirstArray.img} />
            <p> {dataFromFirstArray.sold} sales </p>
             <p> {dataFromSecondArray.productBrand} </p>
             <p> {dataFromSecondArray.productName} </p>
             <p> {dataFromSecondArray.productCategory} </p>
          </div>
       )
     }
    </>
)

更新

productName如果兩者都相同，我如何將陣列合并為一個。歸根結底，我想使用所有資料，但來自一個陣列。

uj5u.com熱心網友回復：

如果將它合并到一個陣列中而不是映射它會更好

像這樣

const Array1 = [ 
{id:1, sold: 69,  productName: 'Epic', image: 'someimage.svg' } ,
{id:2, sold: 121,  productName: 'Legend', image: 'someimage.svg' } ,
{id:3, sold: 368,  productName: 'Top', image: 'someimage.svg' }
]

const Array2 = [ 
{ productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } ,
{ productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } ,
{ productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' }
]

const products = Array1.map(({productName, ...rest}) => {
  return {
    ...rest,
    ...Array2.find(p => p.productName === productName) || {}
  }
})

console.log(products)

//and then

/*products.map((p) => 
        
          <div>
            <img src={p.img} />
            <p> {p.sold} sales </p>
             <p> {p.productBrand} </p>
             <p> {p.productName} </p>
             <p> {p.productCategory} </p>
          </div>
       )
     
    </>
    */

uj5u.com熱心網友回復：

這是我的答案。

{Array1.map((dataFromFirstArray, i) =>
      Array2.map((dataFromSecondArray, j) => {
        if (j === i) {
          return (
            <div>
              <p> {dataFromFirstArray.id}</p>
              <img src={dataFromFirstArray.image} />
              <p> {dataFromFirstArray.sold} sales </p>
              <p> {dataFromSecondArray.productBrand} </p>
              <p> {dataFromSecondArray.productName} </p>
              <p> {dataFromSecondArray.productCategory} </p>
            </div>
          );
        }
      })
    )}

它對我來說很好，請在你的最后嘗試一次。

uj5u.com熱心網友回復：

所以我想答案很簡單，因為我們有來自兩個陣列的資料，如下所示：

const Array1 = [ 
{id:1, sold: 69,  productName: 'Epic' image: 'someimage.svg' } ,
{id:2, sold: 121,  productName: 'Legend' image: 'someimage.svg' } ,
{id:3, sold: 368,  productName: 'Top' image: 'someimage.svg' }
]

const Array2 = [ 
{ productBrand: 'Chiquita' , productName: 'Epic' , productCategory:'Banana' } ,
{ productBrand: 'Famoozo' , productName: 'Legend' , productCategory: 'Mango' } ,
{ productBrand: 'PinkLady' , productName: 'Top' , productCategory: 'Apple' }
]

我們不是連接它，而是映射并搜索匹配的鍵。所以這是我的解決方案：

let Array3 = totalSales.map((item, i) => Object.assign({}, item, soldStatsData[i]));

最后的結果是這樣的：

console.log(Array3)
--------------------
[
 {  
   id:1, 
   sold: 69, 
   productName: 'Epic', 
   productBrand: 'Chiquita', 
   productCategory:'Banana' 
   image: 'someimage.svg' 
} ,
{  
   id:2, 
   sold: 121,  
   productName: 'Legend',
   productBrand: 'Famoozo',
   productCategory: 'Mango' 
   image: 'someimage.svg',
} ,
{
   id:3, 
   sold: 368,  
   productBrand: 'PinkLady',
   productName: 'Top',
   productCategory: 'Apple',
   image: 'someimage.svg'
}

標籤：javascript 数组 反应

上一篇：如何使用屬性application/ld json和data-react-helmet抓取BeautifulSoup？

下一篇：mern堆疊專案中的錯誤連接重置錯誤