Question

我已经使用react创建了我的在线鞋店网站。在我的购物车列表中，我试图增加商品的数量，同时也试图增加总价格。我已尽力尝试了一些方法，但效果并不理想。

在下面的代码中，我使用useState钩子创建了一个状态，然后使用了两个按钮。我正在尝试增加和减少状态。到那个状态时，我会尝试增加商品的数量，然后尝试将价格乘以该数量。如果购物车中有一件物品，它会很好地工作。如果项目多于1个，增加我的购物车中显示的一项的数量的按钮，它也会增加另一项的数量。因此价格也会上涨。

   <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>
</>

）; };`

Answer 1

看起来您有一个可以保存购物车状态的父组件，并且可以映射并返回子组件（例如card）。

问题是您要给卡组件分一杯of。相反，您应该在父组件上创建一个updateCartHandler，并将其作为道具传递给卡片组件。

const updateCartHandler = (id, value) => {
   let updatedCart = cart.map(item => item.id === id ? item.quantity += value : item)

   setCart(updatedCart)

}

传递updatedCartHandler作为道具。并且在卡片组件中调用它时，请确保您同时传递ID和值。

<div>
            <span>Quantity</span>
            <button onClick={() => props.updateCartHandler(shoe.id, +1)}>+</button>
            {shoe.qty}

            <button
              onClick={() => props.updateCartHandler(shoe.id, -1)}
               >
              -
            </button>
          </div>

在我的reactjs电子商务网站购物篮中添加数量

1 个答案: