React JS购物车功能异常：无法获取选中商品数据

先揪出可能导致问题的几个点：

• 购物车状态未在组件间正确共享，传递过程出错导致添加商品时未更新目标数组
• 点击添加按钮时，未传入当前商品的完整数据（如id、名称、价格等核心字段）
• 更新购物车数组时直接修改原数组，React无法检测到状态变化，页面自然不会更新

1. 在App.js中统一管理购物车状态 #

将购物车数组和添加逻辑放在App.js中，通过props传递给子组件：

import { useState } from 'react';
import Bill from './Bill';
import Cart from './Cart';

function App() {
  // 初始化购物车数组，每个商品需包含id、name、price、quantity等必要字段
  const [cartItems, setCartItems] = useState([]);

  // 添加商品到购物车的核心逻辑
  const addToCart = (product) => {
    // 检查购物车中是否已存在同款商品
    const existingItem = cartItems.find(item => item.id === product.id);
    if (existingItem) {
      // 已存在则更新商品数量
      setCartItems(cartItems.map(item => 
        item.id === product.id 
          ? {...item, quantity: item.quantity + 1} 
          : item
      ));
    } else {
      // 不存在则新增商品，默认数量为1
      setCartItems([...cartItems, {...product, quantity: 1}]);
    }
  };

  return (
    <div className="App">
      {/* 把添加方法传给商品展示页 */}
      <Bill addToCart={addToCart} />
      {/* 把购物车数据传给购物车展示页 */}
      <Cart cartItems={cartItems} />
    </div>
  );
}

export default App;

2. 在商品页Bill.js中正确触发添加操作 #

确保点击按钮时传入当前商品的完整数据：

const Bill = ({ addToCart }) => {
  // 替换为你实际的商品列表数据
  const products = [
    {id: 1, name: "汉堡", price: 20},
    {id: 2, name: "可乐", price: 8}
  ];

  return (
    <div className="bill-container">
      {products.map(product => (
        <div key={product.id} className="product-item">
          <h3>{product.name}</h3>
          <p>¥{product.price}</p>
          {/* 点击按钮时传入当前商品的完整数据 */}
          <button onClick={() => addToCart(product)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
};

export default Bill;

3. 在购物车页Cart.js中正确渲染商品 #

遍历购物车数组，展示商品信息及结算总价：

const Cart = ({ cartItems }) => {
  // 计算购物车总金额
  const total = cartItems.reduce((sum, item) => sum + (item.price * item.quantity), 0);

  return (
    <div className="cart-container">
      <h2>购物车</h2>
      {cartItems.length === 0 ? (
        <p>购物车是空的~</p>
      ) : (
        <>
          {cartItems.map(item => (
            <div key={item.id} className="cart-item">
              <span>{item.name}</span>
              <span>单价：¥{item.price}</span>
              <span>数量：{item.quantity}</span>
              <span>小计：¥{item.price * item.quantity}</span>
            </div>
          ))}
          <div className="total">
            <strong>总金额：¥{total}</strong>
          </div>
          <button>结算</button>
        </>
      )}
    </div>
  );
};

export default Cart;

关键注意事项 #

• 更新购物车状态必须使用setCartItems，绝对不能直接修改原数组，需通过扩展运算符[...cartItems]或map返回新数组，否则React无法检测到状态变化，页面不会更新
• 每个商品必须设置唯一id，用于区分是否为同款商品，避免添加或更新逻辑出错
• 确保子组件能正确接收父组件传递的props，比如Bill.js需拿到addToCart方法，Cart.js需拿到cartItems数组

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