NextJS中useState数组内字典的count值更新问题

核心逻辑 #

先判断目标商品是否已在购物车中：

• 存在则找到该商品，将count值加1
• 不存在则执行原有逻辑，添加新商品到购物车

具体实现代码 #

在你的Provider中封装一个统一处理添加/更新的函数即可，示例如下：

// Provider内的state及处理函数
const [cart, setCart] = useState([]);

const addToCart = (productName) => {
  setCart(prevCart => {
    // 查找目标商品在购物车中的索引
    const targetIndex = prevCart.findIndex(item => item.product === productName);
    
    if (targetIndex !== -1) {
      // 商品已存在，创建新数组并更新对应商品的count
      const updatedCart = [...prevCart];
      updatedCart[targetIndex] = {
        ...updatedCart[targetIndex],
        count: updatedCart[targetIndex].count + 1
      };
      return updatedCart;
    } else {
      // 商品不存在，添加新商品
      return [...prevCart, { product: productName, count: 1 }];
    }
  });
};

简洁写法（用map遍历） #

也可以用map简化逻辑，代码更紧凑：

const addToCart = (productName) => {
  setCart(prevCart => {
    const hasProduct = prevCart.some(item => item.product === productName);
    if (hasProduct) {
      return prevCart.map(item => 
        item.product === productName 
          ? { ...item, count: item.count + 1 } 
          : item
      );
    } else {
      return [...prevCart, { product: productName, count: 1 }];
    }
  });
};

使用方式 #

在组件中直接调用这个函数即可，比如：

addToCart('你要添加的商品名称');

这样无论是新商品还是已有商品，都能正确处理：新商品会被加入购物车，已有商品的数量会自动加1。

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