[英]React Redux how to update product quantity in shopping cart
我在 redux 有一家商店。 有2个arrays,女产品和购物车产品
const defaultState = {
womanProducts:
[
{name: "Mini Skirt", img: "https://static.pullandbear.net/2/photos//2022/I/0/1/p/8399/316/800/8399316800_4_1_8.jpg?t=1656932863233&imwidth=563", price: 35, inCart: 1, id: 1},
{name: "Basic Jeans", img: "https://static.pullandbear.net/2/photos//2022/I/0/1/p/8685/326/400/8685326400_4_1_8.jpg?t=1657798996961&imwidth=563", price: 39, inCart: 1, id: 2},
{name: "Fit Dress", img: "https://static.pullandbear.net/2/photos//2022/V/0/1/p/4390/422/611/4390422611_4_1_8.jpg?t=1643722977148&imwidth=563", price: 45, inCart: 1, id: 3},
{name: "Basic Sweatshirt", img: "https://static.pullandbear.net/2/photos//2021/I/0/1/p/8393/363/485/8393363485_4_1_8.jpg?t=1634212398331&imwidth=563", price: 29, inCart: 1, id: 4}
],
cartProducts: [],
}
然后我发送 cartProducts 并将女性产品添加到购物车(案例“ADD_PRODUCTS”将产品添加到购物车中,“REMOVE_FROM_CART”从购物车中删除项目)它运行良好,但“INCREMENT_PRODUCT”不起作用
const reducer = (state = defaultState, action) => {
switch(action.type) {
case "ADD_PRODUCTS":
return {...state, cartProducts: [...state.cartProducts, action.payload]}
case "REMOVE_FROM_CART":
return {...state, cartProducts: state.cartProducts.filter((event) => event.id !== action.payload)}
case "INCREMENT_PRODUCT":
return {
...state,
cartProducts: state.cartProducts.map((item) => item.inCart + action.payload)}
default:
return state
}
但是现在我需要通过单击按钮来增加和减少购物车中的产品
购物车组件:
return(
<div className="cart">
{cartProducts.length > 0 ? cartProducts.map(item =>
<div className="cartItem" key={item.id}>
<img src={item.img} />
<div className="cartItemInfo">
<div className="itemInfo">
<h3>{item.name}</h3>
<h3>{item.price}$</h3>
</div>
<div className="quantity">
<button onClick={() => decrementProduct()}>-</button>
<p>{item.inCart}</p>
<button onClick={() => incrementProduct()}>+</button>
</div>
<div className="itemDelete">
<button onClick={() => removeItem(item.id)}><img src={require('../images/icons/trashCanIcon.png')} /></button>
</div>
</div>
</div>
): <h1>Cart is empty</h1>}
{cartProducts.length > 0 ? <h1 className="totalPrice">Total Price: {totalPrice}$</h1> : <></>}
</div>
)
和 function 增加产品
function incrementProduct() {
dispatch({type: "INCREMENT_PRODUCT", payload: 1})
}
您增加了所有产品的产品数量。 你可以试试这段代码。
case "INCREMENT_PRODUCT":
return {
...state,
cartProducts: state.cartProducts.map((item) => ({
id: item.id,
inCart: item.id === action.payload.id ? item.inCart + action.payload.increment : item.inCart
}));
首先你应该改变你的有效载荷。 它需要项目 ID 来确定您要增加的项目
dispatch({type: "INCREMENT_PRODUCT", payload: {id: 1, increment: 1}})
现在,您可以 map 购物车产品; 如果商品 ID 与购物车商品 ID 相同,则递增或仅返回商品
case "INCREMENT_PRODUCT":
return {
...state,
cartProducts: state.cartProducts.map((item) => {
if(item.id === action.payload.id) {
item.inCart += action.payload.increment;
}
return item;
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.