React Context API全局数量更新异常：点击按钮仅加1而非指定值

核心原因 #

CartProvider中的addToCart函数没有使用传入的商品数量参数q，而是固定执行prevQuantity + 1，导致无论选中多少数量，每次只累加1。同时removeFromCart也存在同样的问题，初始购物车数量useState(1)不符合逻辑，应该初始化为0。

修正后的Provider代码 #

"use client";
import React, { useState, createContext } from "react";

export const Context = createContext({
  quantity: 0,
  addToCart: (q: number) => {},
  removeFromCart: (q: number) => {},
});

const CartProvider = ({ children }: { children: React.ReactNode }) => {
  // 初始购物车数量改为0
  const [quantity, setQuantity] = useState(0);
  
  // 使用传入的q参数进行累加
  const addToCart = (q: number) => {
    setQuantity((prevQuantity) => prevQuantity + q);
  };
  
  // 使用传入的q参数进行递减
  const removeFromCart = (q: number) => {
    setQuantity((prevQuantity) => prevQuantity - q);
  };
  
  return (
    <Context.Provider value={{ quantity, addToCart, removeFromCart }}>
      {children}
    </Context.Provider>
  );
};

export default CartProvider;

其他代码确认 #

• Counter组件已正确将选中的value传递给Button组件
• Button组件已正确接收quantity参数并调用addToCart(quantity)，这部分无需修改

修正后，点击加入购物车按钮时，全局quantity会正确累加选中的商品数量。

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