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

Question

我正在制作一个购物车，如果我将 1 个小披萨、2 个中披萨、3 个大披萨和 4 个超大披萨添加到购物车，然后取出 2 个中披萨，那么该披萨的数量4 个超大披萨变为 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>
    );
}

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

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) {
        setCart(cart.filter(function (cartItem, k) {
            console.log("k = " + k);
            return k !== cid;
        }));
    }
    return (
        <div className="m-1">
            <h5>{cartItem.name} (x {quantity})</h5>
            <span>{cartItem.val1 == 1 ? cartItem.size1 : ""}</span>
            <span>{cartItem.val2 == 1 ? cartItem.size2 : ""}</span>
            <span>{cartItem.val3 == 1 ? cartItem.size3 : ""}</span>
            <span>{cartItem.val4 == 1 ? cartItem.size4 : ""}</span>
            <div className="row">
                <div className="col-xs-6 col-sm-6">
                    <QuantitySelector
                        inputValue={quantity}
                        onInputValueChange={setQuantity} />
                </div>
                <div className="col-xs-6 col-sm-6">
                    <button
                        className="btn btn-primary btn-sm"
                        onClick={(e) => removeFromCart(e, cid)}>Remove</button>
                </div>
            </div>
        </div>
    )
}

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

Answer 1

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

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
);

}