React Redux 改变状态有一些问题

问题描述 投票:0回答:1
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
而不是扩展原始数组?

reactjs react-redux
1个回答
0
投票

看起来您正在尝试在本地以及使用 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>
    ))}
);
© www.soinside.com 2019 - 2024. All rights reserved.