如何在反应js中来自两个嵌套的arrays的map数据？

Question

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

在此处输入图像描述

 { 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> ) }

Answer 1

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

• 'cart' 数组有多个元素，每个元素都是 object
• cartItem（在每个 cart-array 元素内）是一个数组
• cartItem-array 具有名称、图像、价格道具的元素

下面的代码片段中提供了一种可能的解决方案：

 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 } /* <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));