React购物车问题：addToCart函数仅隔次点击生效

问题根源分析 #

你的代码存在三个核心问题：

• 状态更新逻辑错误：在else分支中，通过map遍历购物车时，匹配到目标项就直接调用setCart并仅传入修改后的单个项，导致购物车数组被错误替换为仅包含该修改项，丢失其他商品。
• 状态异步与引用问题：setCart是异步操作，调用后立刻console.log(cart)拿到的始终是旧状态；直接赋值const cartReplica = cart只是复制引用，虽在新增时用扩展运算符规避了部分问题，但逻辑存在隐患。
• 冗余ID获取逻辑：getItemID函数完全多余，按钮绑定的id已是商品ID，无需重复从购物列表中查找。

修正后的代码 #

ShoppingMenu组件 #

import shoppingList from "../Data/ShoppingList";
import { useState } from "react";
import AddToCart from "./AddToCart";

const ShoppingMenu = () => {
  const [cart, setCart] = useState([{ id: 1, quantity: 2 }]);

  function addToCart(itemID) {
    // 使用函数式更新，确保基于最新状态修改
    setCart(prevCart => {
      const existingItem = prevCart.find(item => item.id === itemID);
      
      if (existingItem) {
        // 更新已有商品的数量
        return prevCart.map(item => 
          item.id === itemID 
            ? { ...item, quantity: item.quantity + 1 } 
            : item
        );
      } else {
        // 新增商品到购物车
        return [...prevCart, { id: itemID, quantity: 1 }];
      }
    });
  }

  const mapShoppingMenu = shoppingList.map((shoppingItem) => (
    <div key={shoppingItem.id} className="item-card">
      <img src={shoppingItem.image} alt={shoppingItem.name} className="item-image" />
      <h2>{shoppingItem.name}</h2>
      <h3>${shoppingItem.price}</h3>
      <AddToCart />
      <button
        onClick={() => addToCart(shoppingItem.id)}
      >
        Add To Cart
      </button>
    </div>
  ));

  return <div className="shopping-list">{mapShoppingMenu}</div>;
};

export default ShoppingMenu;

关键修改点说明 #

1. 函数式状态更新：调用setCart时传入回调函数，确保每次修改都基于最新的购物车状态，彻底解决异步更新导致的状态滞后问题。
2. 正确维护购物车数组：
   • 新增商品时，基于旧状态扩展出新数组并添加新项，保留原有数据。
   • 更新已有商品时，通过map生成新数组，仅修改目标项的数量，其余项保持不变。
3. 简化事件逻辑：直接将shoppingItem.id传入addToCart，移除冗余的getItemID函数，减少不必要的性能消耗。
4. 添加列表key：在map生成的元素上绑定key={shoppingItem.id}，符合React列表渲染的最佳实践，避免渲染警告。

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