const [updateCartItems, setUpdateCartItems] = useState([])
const { cartItems, loading: cartLoading } = useSelector((state) => state.cartReducer)
console.log(cartItems)
useEffect(() => {
setUpdateCartItems(cartItems)
}, [cartItems])
console.log(updateCartItems)
return (
{cartItems?.map((item, index) => {
const [itemQty, setItemQty] = useState(item.quantity)
console.log(itemQty)
const totalPrice = item.price * itemQty
console.log(totalPrice)
const handleIncrease = () => {
if(itemQty < 10){
setItemQty(itemQty + 1)
}
setUpdateCartItems({...item, quantity: itemQty})
}
// console.log(updateCartItems)
const handleDecrease = () => {
if(itemQty > 1){
setItemQty(itemQty - 1)
}
}
<div className="cart-plus-minus">
<div className="dec qtybutton" onClick={handleDecrease}>
-
</div>
<input type="text" className="cart-plus-minus-box" name='qtybutton' value={itemQty} onChange={(e) => setItemQty(parseInt(e.target.value))}/>
<div className="inc qtybutton" onClick={handleIncrease}>
+
</div>
</div>
)
在这个 React 项目中,我使用 redux 状态管理来维护
cartItems
的状态。但是,当我尝试通过单击按钮更新购物车商品数量时。 itemQty
可以更新,但对应商品数量的updateCartItems
仍然保持不变。有什么解决方案可以让updateCartItems
随着数量的变化而更新吗?还有什么方法可以更新相应项目数量的cartItems
而不是扩展原始数组?
看起来您正在尝试在本地以及使用 redux 来更新状态。您需要确保您出于正确的原因使用 redux 并相应地更新状态。请记住,您只需要一个事实来源,因此您不必在两个地方管理状态。随着您的应用程序变得越来越大,它可能会出现问题。
如果您想通过 redux 更新状态,您将需要将有效负载分派给操作创建者。
const { cartItems, loading: cartLoading } = useSelector((state) => state.cartReducer);
const dispatch = useDispatch();
const handleIncrease = (item) => {
if (item.quantity < 10) {
dispatch(updateCartItemQuantity(item.id, item.quantity + 1));
}
};
const handleDecrease = (item) => {
if (item.quantity > 1) {
dispatch(updateCartItemQuantity(item.id, item.quantity - 1));
}
};
return (
{cartItems?.map((item, index) => (
<div className="cart-plus-minus">
<div className="dec qtybutton" onClick={() => handleDecrease(item)}>
-
</div>
<input type="text" className="cart-plus-minus-box" name='qtybutton' value={item.quantity} readOnly />
<div className="inc qtybutton" onClick={() => handleIncrease(item)}>
+
</div>
</div>
))}
);