如何在反应js中映射来自两个嵌套数组的数据？答案

【问题标题】：How to map data from two nested arrays in react js?如何在反应js中映射来自两个嵌套数组的数据？
【发布时间】：2022-01-08 16:44:21
【问题描述】：

在这里，我在另一个数组“cart”中取了一个名为“cardItem”的数组。现在，我想映射“cardItem”数组。

enter image description here

 {
                        cart.cardItem?.map(item =><tr >
                            
                            <td></td>
                            <td> <img src={item.image} alt="" className='cart-image order-image' /> <br />
                            <small>{item.name}</small>
                            </td>
                            <td>{item.price}</td>
                            <td>{item.cartQuantity}</td>
                            <td>{item.cartQuantity*item.price}</td>
                        </tr>

                            )   
                        }

【问题讨论】：

你能再解释一下吗？
请提供一个带有cart 示例的sn-p（不是图片），以便我们使用它作为答案。

标签： javascript arrays reactjs mongodb redux

【解决方案1】：

基于以下假设“购物车”是一个数组，

'cart' 数组有多个元素，每个元素都是一个对象

cartItem（在每个 cart-array 元素内）是一个数组

cartItem-array 包含具有名称、图像、价格道具的元素

下面的代码-sn-p 给出了一种可能的解决方案：

const cart = [{
    cartQuantity: 1,
    cartItem: [{
      name: 'Item Name 01',
      image: 'someImage.png',
      price: 25
    }, {
      name: 'Item Name 101',
      image: 'someImage.png',
      price: 12
    }]
  },
  {
    cartQuantity: 5,
    cartItem: [{
      name: 'Item Name 02',
      image: 'someImage.png',
      price: 10
    }]
  },
  {
    cartQuantity: 1,
    cartItem: [{
      name: 'Item Name 03',
      image: 'someImage.png',
      price: 50
    }, {
      name: 'Item Name 101',
      image: 'someImage.png',
      price: 18
    }]
  }
];
// 'cart' array has multiple elements each of which is an object
// cartItem (within each cart-array element) is an array
// cartItem-array has elements that have name, image, price props

const getAllItems = (cart = []) => 
  (cart?.map(
    cartObj => cartObj?.cartItem?.map(
      item => ({
        image: item.image,
        name: item.name,
        price: item.price,
        cartQuantity: cartObj.cartQuantity,
        quantityTimesPrice: cartObj.cartQuantity * item.price ?? 0
      }
  /* <tr>
    <td></td>
    <td>
      <img src={item.image} alt="" className='cart-image order-image' />
      <br />
      <small>{item.name}</small>
    </td>
    <td>{item.price}</td>
    <td>{cartObj.cartQuantity}</td>
    <td>{cartObj.cartQuantity*item.price}</td>
  </tr> */
))));
// the above will return an array-of-array (of objects). If required, use .flat(), to get a simple array of objects instead.
// for simplicity in reviewing the results, have returned an object instead of JSX/HTML.
console.log(getAllItems(cart));
console.log('as a flat array: ', getAllItems(cart).flat());

说明

首先，遍历 'cart' 数组中的每个元素
在上面的sn-p中，每个'cart'数组元素都是使用'cartObj'处理的
对于购物车数组中的每个元素，遍历“cartItem”数组
现在，对于每个“cartItem”（在上面的 code-sn-p 中简称为“item”），收集名称、图片、价格
计算 cartQuantity 的乘积（使用“cartObj”从外部迭代计算）和价格（从“item”计算）

注意： ?. 和 ?? 分别是 optional-chaining 和 Nullish coalescing 运算符。

【讨论】：