如何在JavaScript和React中为按钮关联商品变量实现购物车功能？

完全可以实现你的需求，下面是针对你的场景优化后的正确实现方式：

核心思路 #

不再硬编码商品信息，而是直接将商品对象作为参数传递给addToCart函数，同时完善购物车的重复商品处理逻辑（你注释里提到的需求）。

步骤1：定义商品数据（可选但推荐） #

把商品信息单独定义成变量或数组，方便后续维护和批量渲染按钮：

// 示例商品数据，可根据实际需求扩展
const products = [
  { name: "T恤", quantity: 1, totalAmount: 99 },
  { name: "牛仔裤", quantity: 1, totalAmount: 199 },
  { name: "运动鞋", quantity: 1, totalAmount: 399 },
];

步骤2：修正addToCart函数 #

• 去掉不必要的async（当前代码无异步操作，比如API请求）
• 使用函数式更新（setCart(prevCart => ...)）确保获取最新的购物车状态
• 实现重复商品的数量和金额累加逻辑：

const [cart, setCart] = useState([]); // 假设你已经定义了购物车状态

const addToCart = (product) => {
  setCart(prevCart => {
    // 检查购物车中是否已有该商品
    const existingItem = prevCart.find(item => item.name === product.name);
    
    if (existingItem) {
      // 已有商品：更新数量和总金额
      return prevCart.map(item => 
        item.name === product.name 
          ? {
              ...item,
              quantity: item.quantity + product.quantity,
              totalAmount: item.totalAmount + product.totalAmount
            }
          : item
      );
    } else {
      // 新商品：添加到购物车
      return [...prevCart, { ...product }];
    }
  });
};

步骤3：正确编写按钮代码 #

不需要给Button组件额外加product属性（除非你自定义了接收该prop的Button组件），直接在onClick回调中传递商品对象即可，有两种常用写法：

写法1：单个按钮直接传对象 #

适合少量固定商品：

<Button style={styles.catagory} onClick={() => addToCart({ name: "T恤", quantity: 1, totalAmount: 99 })}>
  T恤 - 99元
</Button>

写法2：循环渲染多个按钮（推荐） #

如果商品数量多，用数组循环生成按钮更高效：

{products.map(product => (
  <Button 
    key={product.name} // 必须加key，React列表渲染要求
    style={styles.catagory} 
    onClick={() => addToCart(product)}
  >
    {product.name} - {product.totalAmount}元
  </Button>
))}

为什么你的设想代码有问题？ #

• 函数组件中不能使用this.product：React函数组件没有this上下文，直接传递商品对象或变量即可
• 普通Button组件不接收product属性：如果不是你自定义的Button，这个prop会被忽略，直接在onClick里传参更直接

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