React实现点击按钮向cartList数组添加商品对象的问题解决

你的代码存在两个核心问题导致功能失效，直接修改如下：

1. 给Product组件传递并绑定点击事件 #

你在Shop组件里给Product传了onClick属性，但Product组件没有接收该属性，也未将其绑定到“加入购物车”按钮上。修改Product.jsx：

import React from 'react';
import './Product.css';

// 新增接收onAddToCart props（语义化命名，比onClick更清晰）
function Product({img, title, price, id, type, onAddToCart}) {
    return (
        <div className='product' key={id} type={type}>
            <div className='buy__top'>
                <div className='product__top-image-background'>
                    <img className='product__top-image' src={img} alt={title}></img>
                </div>
                <h3 className='product__top-title'>{title}</h3>
            </div>
            <div className='product__buy'>
                <h3 className='product__buy-price'>{price} грн</h3>
                {/* 将按钮点击事件绑定到传入的函数 */}
                <button className='product__buy-button' onClick={onAddToCart}>В корзину</button>
            </div>
        </div>
    )
}

export default Product;

2. 优化Shop组件的状态更新逻辑 #

直接使用[...cartList, el]可能因React闭包特性获取到旧状态值，推荐用函数式更新确保拿到最新的cartList状态：

修改Shop.jsx里的Product调用部分：

<Product 
    img={el.img} 
    title={el.title} 
    price={el.price} 
    key={el.id} 
    // 函数式更新，prevCartList为最新的状态值
    onAddToCart={() => setCartList(prevCartList => [...prevCartList, el])}
/>

额外修复 #

你的Shop组件中用到了modalActive和modalSetActive但未定义，会引发报错，需补充对应的useState声明：

const [modalActive, modalSetActive] = useState(false);

修改完成后，点击“В корзину”按钮即可将对应商品对象添加到cartList数组中。

内容的提问来源于stack exchange，提问作者user20743167