reactjs React -从数组中删除会扰乱组件状态

tmb3ates 于 5个月前发布在 React

关注(0)|答案(1)|浏览(51)

我在做一个购物车，如果我在购物车里加入1个小披萨，2个中披萨，3个大披萨，4个超大披萨，然后我把2个中披萨取出来，那么4x的数量-大披萨数量变为3，大披萨数量变为2。小披萨数量保持为1。我只想在不影响其他项目的数量。请帮助我修复此代码：

import React, { useEffect, useState, useContext } from 'react';
import { CartContext } from './App'
import QuantitySelector from './QuantitySelector';
import CartItem from './CartItem';

export default function Cart(props) {
    const [cart, setCart] = useContext(CartContext);
    return (
        <div>
        {
            cart.map((cartItem, key) =>
                <div>{key}
                    <CartItem
                        key={key}
                        cid={key}
                        cartItem={cartItem}
                        quantity={cartItem.quantity} />
                </div>
            )
        }
        </div>
    );
}

个字符
我确保从数组中删除了正确的索引。

reactjs

来源：https://stackoverflow.com/questions/77756132/react-deleting-from-array-messes-up-component-state

1条答案

按热度按时间

6tdlim6h1#

这里的问题是，当您删除一个商品时，您正在更新整个购物车，这会导致其他商品的数量发生变化。与其直接过滤购物车数组，不如使用您想要保留的商品创建一个新数组。这样，原始数组保持不变，并且您不会无意中影响其他商品的数量。

export default function CartItem(props) {
const [cart, setCart] = useContext(CartContext);
const cartItem = props.cartItem;
const cid = props.cid;
const [quantity, setQuantity] = useState(props.quantity);

function removeFromCart(e, cid) {
    // Create a new array without the item to be removed
    const newCart = cart.filter(function (cartItem, k) {
        return k !== cid;
    });

    // Update the cart with the new array
    setCart(newCart);
}

return (
    // ... rest of the component remains unchanged
);

字符串
}

赞(0）回复(0）举报 5个月前

我来回答

reactjs React -从数组中删除会扰乱组件状态

1条答案

相关问题

热门标签

最新问答