Javascript 获取购物车产品的总价格

我在这里做一个项目，遇到了一个小问题。现在，我需要得到购物车中所有物品的价格，并将其相加，形成一个“总计：{price}”，很好。我的大脑此刻完全静止不动

下面是我正在使用的代码：

  const { cartItems } = useContext(AddToCartContext);
  const [totPrice, setTotPrice] = useState(0);

  let cart = cartItems.filter(
    (ele, ind) => ind === cartItems.findIndex((elem) => elem.id === ele.id)
  );

  useEffect(() => {
    cart.forEach((item) => {
      setTotPrice(totPrice + item.price);
      console.log(item.price);
    });
  }, []);

  console.log(`${totPrice}`);

我非常清楚这不起作用，因为

totPrice

useState正在将其自身重置为0，作为初始值。但我真的不确定我该如何处理这个问题

我需要它来获取所有产品，可能是10种产品。然后把这10种产品的价格加起来，得到总数

---

任何想法都有帮助

这里不需要额外的状态。您所需要的只是从状态派生的值

const { cartItems } = useContext(AddToCartContext);

let cart = cartItems.filter(
  (ele, ind) => ind === cartItems.findIndex((elem) => elem.id === ele.id)
);

const totalPrice = cart.reduce(
 (totalPrice, item) => totalPrice + item.price,
 0
);

---

这里不需要额外的状态。您所需要的只是从状态派生的值

const { cartItems } = useContext(AddToCartContext);

let cart = cartItems.filter(
  (ele, ind) => ind === cartItems.findIndex((elem) => elem.id === ele.id)
);

const totalPrice = cart.reduce(
 (totalPrice, item) => totalPrice + item.price,
 0
);

---

使用Array.prototype.reduce：

let totalPrice=cartItems.reduce（（总计，cartItem）=>total+cartItem.price）；
setTotPrice（总价）；

---

啊，另一个答案击败了我

使用Array.prototype.reduce：

let totalPrice=cartItems.reduce（（总计，cartItem）=>total+cartItem.price）；
setTotPrice（总价）；

---

啊，另一个答案击败了我

啊！谢谢你，这么简单的事情也是哈哈。啊哈！谢谢你，这么简单的事情也是哈哈。