如何在购物车中筛选项目数组?

Question

我有一个购物车，当你点击'添加';按钮时，将产品连同参数一起添加到购物车中。

我的问题是，当我点击"同样，这个产品被添加并显示在屏幕上。也就是说，篮子里有两种相同的产品。我需要重复添加同一产品时，其数量会增加，但不会添加新卡。问题示例

const Cart = (props) => {
const cartItems = useSelector((state) => state.cart.productArr.items);
return (
<Card className={classes.cart}>
<h2>Your Shopping Cart</h2>
<ul>
{filteredArr.map((cartItem) => (
<CartItem
key={cartItem.id}
item={{
title: cartItem.title,
price: cartItem.price,
quantity: cartItem.quantity,
}}
/>
))}
</ul>
</Card>
);
};

Answer 1

这段代码可以帮助您https://codesandbox.io/s/cool-architecture-6x0x8n?file=/src/App.js

import { useState } from "react";
const CartItem = ({ item, onAdd, onSubtract }) => {
return (
<li>
<p>{item.title}</p>
<p>{item.price}</p>
<p>{item.quantity}</p>
<button onClick={() => onSubtract(item.id)} disabled={!item.quantity}>
{" "}
-{" "}
</button>
<button onClick={() => onAdd(item.id)}> + </button>
</li>
);
};
const Cart = ({ cartItems, setCartItems }) => {
const onAdd = (currentId) => {
const newItems = cartItems.map((item) => {
if (item.id === currentId) {
return { ...item, quantity: item.quantity + 1 };
}
return item;
});
setCartItems(newItems);
};
const onSubtract = (currentId) => {
const newItems = cartItems.map((item) => {
if (item.id === currentId && item.quantity > 0) {
return { ...item, quantity: item.quantity - 1 };
}
return item;
});
setCartItems(newItems);
};
return (
<div>
<h2>Your Shopping Cart</h2>
<ul>
{cartItems.map((cartItem) => (
<CartItem
key={cartItem.id}
item={cartItem}
onAdd={onAdd}
onSubtract={onSubtract}
/>
))}
</ul>
</div>
);
};
export default function App() {
const [items, setItems] = useState([
{
id: 1,
title: "Book",
price: 7,
quantity: 1
},
{
id: 2,
title: "pencil",
price: 9,
quantity: 0
}
]);
return (
<div className="App">
<Cart cartItems={items} setCartItems={setItems} />
</div>
);
}