我正在为电子商务网站实现一个购物车。购物车是一个状态变量,名称为shopCart,用对象数组表示。每个对象包含有关产品的信息,例如标题和价格。我试图实现一个删除按钮,它可以从shopCart状态中删除商品,但更改不会在屏幕渲染时呈现出来。我可以清空购物车,但屏幕仍然显示产品。以下是购物车页面的主要代码:
return (
<div class={styles.container}>
<h1>Product</h1><h1>Quantity</h1><h1>Unit price</h1><h1>Total price</h1><div></div>
{
shopCart.map((product, i, array) => <CartItem key={product.id} product={product} index={i} array={array}/>)
}
</div>
)
以下是CartItem.js的实现代码:
const CartItem = (props) => {
let { shopCart, setShopCart } = useContext(Context);
let product = props.product;
// takes the identification of a shopping cart product and removes it from the cart
const decrease = (element) => {
shopCart.forEach((el, i) => {
if (el.hasOwnProperty('id')) {
if (el.id === element) {
let aux = shopCart;
aux.splice(i, 1);
setShopCart(aux);
}
}
})
}
return (
<div>
<img src={product.image}></img>
<h1>{product.quantity}</h1>
<h1>{product.price}</h1>
<h1>{product.price * product.quantity}</h1>
<button onClick={() => {
decrease(product.id);
}}>Remove</button>
</div>
)
}
为什么即使在每次单击“移除”按钮后,购物车项目被删除了,但购物车仍然无法正确呈现?