Как получить накопленную цену во вложенном массиве, используя Reduce в React

Question

В моем 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
            },
        ]
    }
]

Цель состоит в том, чтобы получить общую цену ...

спасибо

Answer 1

Вам нужно использовать вложенное сокращение, чтобы найти общее количество аддонов, как это.

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

Есть несколько способов расчета общей цены аддона.

Если вам удобнее использовать for l oop, 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
)

Answer 3

Вы можете создать массив со всеми ценами, используя Array.flatMap , а затем добавить их, используя Array.reduce

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

Answer 4

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