将产品添加到具有不同特性的购物车中

Question

我在卡中制作了一个选择框，并带有DB的属性，并且我的添加/删除按钮。但是我无法使所有这些工作正常。因为它应该像这样工作：在选择框中选择颜色/价格，然后用按钮添加/删除产品，然后获取具有不同属性（颜色，价格）的产品

/src/app.js

const {getData} = require('./db/db');
const products = getData();

    function App() {
      const [cartItems, setCartItems] = useState([]);
      const onAdd = (product) => {
        const exist = cartItems.find((x) => x.id === product.id);
        if (exist) {
          setCartItems(
              cartItems.map((x) =>
                x.id === product.id ? {...exist, qty: exist.qty + 1} : x
            )
          );
        } else {
          setCartItems([...cartItems, {...product, qty:1}])
        }
      };
      const onRemove = (product) => {
        const exist = cartItems.find((x) => x.id === product.id);
        if (exist.qty === 1) {
          setCartItems(cartItems.filter((x) => x.id !== product.id));
        } else {
          setCartItems(
              cartItems.map((x) =>
                x.id === product.id ? {...exist, qty: exist.qty - 1} : x
              )
          );
        }
      };
    
      return (
      <>
        <h1 className='heading'>Lorem</h1>
        <Cart cartItems={cartItems}/>
        <div className='cards_container'>
          {products.map((product) => {
            return (<Card product={product}
                      key={product.id}
                      onAdd={onAdd}
                      onRemove={onRemove}
                 />
            );
          })}
        </div>
      </>
    )
    }

db example

{
    title: 'Title1',
    id: 1,
    desc: 'Lorem ipsum',
    price: ['200', '250'],
    color: ['Grey', 'Red', 'Black', 'Yellow', 'Brown'],
    image: 1Img
}

/src/components/card/card.jsx/src

function Card({product, onAdd, onRemove}) {
    const [count, setCount,] = useState(0);
    const {title, image, price, color, desc, id} = product

    const handleIncrement = () => {
        setCount( count + 1)
        onAdd(product)
    };
    const handleDecrement = () => {
        setCount( count - 1)
        onRemove(product)
    };

        return (
        <div className='card'>
            <span className={`${count !== 0 ? 'card_badge' : 'card_badge-hidden'}`}>
                {count}
            </span>
            <div className="image_container">
                <img src={image} alt={title} />
            </div>
            <h4 className='card_title'>
                {title}
            </h4>
            <p className='card_desc'>
                {desc}
            </p>
            <span className='card_id'>
                {id}
            </span>
            <div className='card_color_price'>
                <form id="app-cover">
                    <div id="select-box">
                        <input type="checkbox" id="options-view-button"/>
                            <div id="select-button" className="brd">
                                <div id="selected-value">
                                    <span>Choose Color</span>
                                </div>
                            </div>
                            <div id="options">
                                <div className="option">
                                    <input className="s-c top" type="radio" name="platform" value="grey"/>
                                        <input className="s-c bottom" type="radio" name="platform" value="grey"/>
                                            <span className="label">{color[0]} | {price[0]}$</span>
                                            <span className="opt-val">{color[0]} {price[0]}$</span>
                                </div>
                                <div id="option-bg"></div>
                            </div>
                    </div>
                </form>
            </div>
            <div className='btn_container'>
                <Button title={'+'} type={'add'} onClick={handleIncrement}/>
                {count !== 0 ?(
                    <Button title={'-'} type={'remove'} onClick={handleDecrement}/>
                ) : (
                    ''
                )}
            </div>
        </div>
    );
}

/components/cart /cart/cart.jsx

function Cart({cartItems, onCheckout}) {
    const totalPrice = cartItems.reduce((a, c) => a + c.price[0] * c.qty, 0);

    return (
        <div className='cart_container'>
            <br/>
            <Button
                title={`${cartItems.length === 0 ? "Cart is empty" : "Cart" + '\n' + "Total price: $" + totalPrice} `}
                type={"checkout"}
                disable={cartItems.length == 0 ? true : false}
                onClick={onCheckout}
            />
        </div>
    );
}