如何在 React 中使用 reduce 获取嵌套数组中的累计价格

Question

在我的 mapStateToProps 中，我有一组对象（产品）。在每个对象中，有一个"addons"数组，另一个对象数组。我怎样才能累计每个产品的所有 "addons" 的价格。

const mapStateToProps = (state) => {
    return ({
    ...state,
    totalItemsAddonPrice: ????,
    totalItemPrice: state.toggleCartReducer.cartItems.reduce((accumulatedQuantity, cartItem) => accumulatedQuantity + cartItem.quantity * cartItem.price, 0),
    itemCount: state.toggleCartReducer.cartItems.reduce((accumulatedQuantity, cartItem) => accumulatedQuantity + cartItem.quantity, 0),
    tax: state.toggleCartReducer.cartItems.reduce((accumulatedQuantity, cartItem) => accumulatedQuantity + cartItem.quantity * cartItem.price, 0) * .0725
})}

exampleData = [ 
    {
        name:"product1",
        price:10,
        addons: [
            {
                addonName: "first add on",
                addonPrice: 3
            },
            {
                addonName: "second add on",
                addonPrice: 1
            },
        ]
    },
    {
        name:"product2",
        price:15,
        addons: [
            {
                addonName: "product2 add on",
                addonPrice: 3
            },
            {
                addonName: "product2 second add on",
                addonPrice: 2
            },
        ]
    }
]

目标是拿到总价...

谢谢

Answer 1

您需要像这样使用嵌套 reduce 来查找插件总数。

const exampleData = [ 
    {
        name:"product1",
        price:10,
        addons: [
            {
                addonName: "first add on",
                addonPrice: 3
            },
            {
                addonName: "second add on",
                addonPrice: 1
            },
        ]
    },
    {
        name:"product2",
        price:15,
        addons: [
            {
                addonName: "product2 add on",
                addonPrice: 3
            },
            {
                addonName: "product2 second add on",
                addonPrice: 2
            },
        ]
    }
]


const addOntotal = exampleData.reduce((totalPrice, item) =>
  totalPrice + item.addons.reduce((total, addon) => total + addon.addonPrice, 0), 0);
 
console.log(addOntotal)

Answer 2

totalItemsAddonPrice = exampleData.reduce((accum, curr) => {
 return accum + curr.addons.reduce((acc, cur) => {
   return acc + cur.addonPrice
  }, 0)
}, 0)

Answer 3

您可以使用 Array.flatMap and then add them using Array.reduce

制作包含所有价格的数组

exampleData
  .flatMap(item => [item.price, ...item.addons.map(a => a.addonPrice)])
  .reduce((total, price) => total + price, 0)

Answer 4

有多种计算插件总价的方法。

如果您对 for 循环感到满意，可以在此处使用 For of。

let price = 0;
for(const product of exampleData) {
  for(const addon of product.addons) {
    price+=addon.addonPrice
  }
}

以上代码将遍历 exampleData。 exampleData 的每个元素都将由变量 product 保存。 product 是一个带有 addons 数组的对象。将对象中的 addonPrice 添加到价格会得到所需的结果。

但是，如果您习惯使用 Array.reduce，代码会更短，但您可能需要一些时间来理解它。

const price = exampleData.reduce(
  (prodAcc, prod) => {
    return prodAcc + prod.addons.reduce(
      (addonAcc, curAddon) => {
        return addonAcc + curAddon.addonPrice
      }, 0
    )
  }, 0
)

如何在 React 中使用 reduce 获取嵌套数组中的累计价格

How to get accumulated price in a nested array using reduce in React

javascript

reduce

reactjs

redux