React函数调用时cartItems为空，导致购物车商品重复添加问题

问题核心 #

购物车商品添加功能正常，但无法阻止重复项：每次调用addToCart函数时，cartItems状态数组读取为空，导致相同PID的商品被重复添加，尽管页面上已能看到已添加的商品。函数已传递给inventoryModal子组件，需求是从库存模态框选品时，检查购物车现有状态过滤重复项。

问题原因 #

问题出在闭包捕获旧状态：

• addToCart函数在组件初始渲染时创建，捕获了当时的cartItems（空数组）
• 后续cartItems状态更新后，子组件拿到的仍是旧版本的addToCart函数，导致判断重复时始终用的是空数组，根本检测不到已存在的商品
• 你用了setCartItems的函数式更新（这部分是对的），但判断重复的逻辑用的是当前作用域里的cartItems变量，而不是最新的状态

解决方案 #

把重复判断逻辑移到setCartItems的函数式回调中，这个回调会接收最新的cartItems状态，确保判断基于最新数据；同时用useCallback包裹addToCart，保证子组件拿到的是最新版本的函数。

修正后的代码 #

父组件中修正addToCart函数 #

import { useCallback, useState } from 'react';

// ...其他组件代码

const [cartItems, setCartItems] = useState([]);

const addToCart = useCallback((row) => {
  const targetPID = row.values.PID;
  setCartItems((latestCartItems) => {
    // 基于最新状态判断是否存在重复商品
    const exist = latestCartItems.find(item => item.PID === targetPID);
    if (exist) {
      console.log("Cart Item Already Exists");
      return latestCartItems; // 存在则不修改状态，直接返回原数组
    }
    // 不存在则添加新商品
    const newCartItem = { ...row.values };
    return [...latestCartItems, newCartItem];
  });
}, []); // 依赖为空，因为判断逻辑用的是setCartItems回调的最新状态

确保子组件接收最新的addToCart #

父组件传递函数给子组件时，因已用useCallback包裹，子组件每次渲染都会拿到最新的函数，避免闭包问题：

<InventoryModal addToCart={addToCart} />

子组件使用逻辑保持不变 #

const tableHooks = (hooks) => {
  hooks.visibleColumns.push((columns) => [
    {
      id: "Actions",
      Header: "Actions",
      Cell: ({ row }) => (
        <button className="viewBtn" onClick={() => props.addToCart(row)}>
          Add To Cart
        </button>
      ),
      Filter: ColumnFilter
    },
    ...columns,
  ]);
};

补充说明 #

传递给addToCart的行数据结构示例：

• 包含values对象，其中PID为字符串类型（如"1"），同时附带商品名称、价格等其他属性

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