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

【问题标题】：How to get accumulated price in a nested array using reduce in React如何在 React 中使用 reduce 获取嵌套数组中的累积价格
【发布时间】：2020-05-20 23:27:01
【问题描述】：

在我的 mapStateToProps 中，我有一个对象（产品）数组。在每个对象中，都有一个“插件”数组，另一个对象数组。我怎样才能累积每个产品的所有“插件”的价格。

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
            },
        ]
    }
]

目标是得到总价……

谢谢

【问题讨论】：

标签： javascript reactjs redux reduce

【解决方案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)

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用Array.flatMap 创建一个包含所有价格的数组，然后使用Array.reduce 添加它们

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

【讨论】：

【解决方案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
)

【讨论】：