react使用cart组件.如何计算总价

Question

我正在使用的npm包

大家好！我正在尝试为一个简单的网站实现一个从API获取的购物车。所以我的渲染方法看起来像这样。。。

{somedata.map((items) => {
return (
<div key={items._id} className="col-md-3 col-12 my-2">
<div className="card h-100">
<button
className="btn btn-light"
onClick={() => addItem(items)}
>
Add to Cart
</button>
<img className="card-img-top" src={items.photo.url} alt="" />
<div className="card-body text-center">
<h3 className="card-title m-2">{items.title}</h3>
<p className="card-text">{items.description}</p>
<span className="card-text border p-3 m-2">
<b>CAD {items.price} $</b>
</span>
</div>
</div>
</div>
);
})}

这就是我的购物车的样子。我只是用他们提供给我们的例子。

return (
<>
<div className="row cart_box">
<h1>Cart ({totalUniqueItems})</h1>
<ul className="cart_ul">
{items.map((item) => (
<li key={item.id} className="cart_li">
{item.quantity} x {item.title}
<div>
<img
className="img-fluid"
src={item.photo.url}
width="100px"
alt=""
/>
</div>
<button
className="btn btn-info"
onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
>
-
</button>
<button
className="btn btn-info"
onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
>
+
</button>
<button
className="btn btn-info"
onClick={() => removeItem(item.id)}
>
&times;
</button>
</li>
))}
</ul>
</div>
</>
);
}

我现在的问题是如何执行总价？我确实看到了一个cartotal方法，但我不知道如何实现它。感谢您的帮助！：(

Answer 1

似乎cartTotal只是一个表示购物车中总价值的值。根据我的判断，这不是一个函数。

你可以通过状态界面看到它是一个数字：

interface InitialState {
id: string;
items: Item[];
isEmpty: boolean;
totalItems: number;
totalUniqueItems: number;
cartTotal: number; // <-- number type
metadata?: Metadata;
}

初始状态对象：

export const initialState: any = {
items: [],
isEmpty: true,
totalItems: 0,
totalUniqueItems: 0,
cartTotal: 0, // <-- number value
metadata: {},
};

它计算此处实现的总值：

const calculateTotal = (items: Item[]) =>
items.reduce((total, item) => total + item.quantity! * item.price, 0);

您应该能够从useCart钩子的返回对象中销毁cartTotal。

const { cartTotal } = useCart();
...
<div>Cart total: {cartTotal}</div>

如果cartTotal对您不起作用，那么您也可以在已经渲染的items阵列上使用相同的计算来手动计算购物车总数。