我正在这里开展一个项目,但遇到了一个小问题。现在我需要获取购物车中所有商品的价格并将其加在一起构成“总计:{价格}”,好吧。此刻我的大脑完全静止。
现在这是我使用的代码:
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 种产品的价格相加,得出总价。
任何想法都可以提供帮助!
答案 0 :(得分:1)
这里不需要额外的状态。您所需要的只是从状态派生的值。
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
);
答案 1 :(得分:1)
使用 Array.prototype.reduce:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
let totalPrice = cartItems.reduce((total, cartItem) => total + cartItem.price);
setTotPrice(totalPrice);
啊,另一个答案打败了我。 :)