reactjs - 反应获取购物车中的总金额项目

Question

我正在尝试获取购物车中的全部商品。问题在于它只获取购物车中唯一商品的总数量。如果一个项目是重复的，例如有 2 个相同的项目，它不会添加到总项目

这是一个 CodeSandBox 示例： https ://codesandbox.io/s/nextjs-cart-system-tfg1e

我试过在类似的_app.js东西中添加一个useEffect：

const total = items.cart.reduce((amount, item) => { return amount + item.quantity}, 0)

但我似乎无法让它工作。

这里的任何帮助将不胜感激！

标签： reactjsnext.js

Answer 1

您显示cart.items.length为“总项目”，但这只是单个项目的数量，没有考虑quantity在内。相反，你可以使用这个：

<span>{cart.items.reduce((accum,item) => accum + item.quantity, 0)}</span>

该reduce函数将遍历数组items并汇总所有quantity值。请参阅此处的文档。

这只是执行此操作的一种简短方法：

let totalItems = 0;
for (const item of cart.items) {
  totalItems += item.quantity;
}
console.log("Total Items: " + totalItems);