在我的reactjs电子商务网站购物篮中添加数量
在我的reactjs电子商务网站购物篮中添加数量
提问于 2020-07-11 22:18:27
我已经使用react创建了我的在线鞋店网站。在我的购物车清单中，我正在努力增加商品的数量，在增加数量的同时，我也在努力提高总价。我试了一些我力所能及的方法，但我没有得到好的结果。
在下面的代码中，我使用useState钩子创建了一个状态，然后使用两个按钮。我正在尝试增加和减少我的状态。通过这种状态，然后我尝试增加我的商品的数量，然后尝试将价格乘以该数量。如果购物车中只有一件商品，它就可以正常工作。如果有一个以上的项目，增加一个项目的数量按钮显示在我的购物车，它也增加了其他项目的数量。因此，价格也会上涨。
<Paper className={classes.total}>
<h3>Total Items: {itemsInCart.length}</h3>
<h3>Total Price: ${total}</h3>
</Paper>
<Container className={classes.root}>
<Grid container spacing={2} className={classes.container}>
{itemsInCart.map((shoe) => (
<Grid item xs={12} sm={6} md={4} key={shoe.id}>
<img
src={shoe.imgurl}
alt=""
height="200px"
className={classes.img}
onClick={() => {
navigate(`/products/${shoe.id}`);
}}
/>
<Typography variant="body1">{shoe.name}</Typography>
<Typography variant="body2">Price: ${shoe.price}</Typography>
<div>
<span>Quantity</span>
<button onClick={() => setCount(count + 1)}>+</button>
{(shoe.qty = count)}
<button
onClick={() => {
shoe.qty > 1 ? setCount(count - 1) : setCount(1);
}}
>
-
</button>
</div>
</Grid>
))}
</Grid>
</Container>
</>)；};`
回答 1
Stack Overflow用户
发布于 2020-07-12 02:33:37
看起来你有一个父组件来保存你的购物车状态，你映射并返回子组件，即卡片。
问题是你给了你的卡片组件一片状态的计数。相反，您应该在父组件上创建updateCartHandler，并将其作为道具传递给卡片组件。
const updateCartHandler = (id, value) => {
let updatedCart = cart.map(item => item.id === id ? item.quantity += value : item)
setCart(updatedCart)
}将updatedCartHandler作为道具传递。当它在card组件中被调用时，一定要同时传递id和value。
<div>
<span>Quantity</span>
<button onClick={() => props.updateCartHandler(shoe.id, +1)}>+</button>
{shoe.qty}
<button
onClick={() => props.updateCartHandler(shoe.id, -1)}
>
-
</button>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62850304
复制相关文章
相似问题
腾讯云开发者
