React购物车quantity异常加2而非加1问题求助（StrictMode相关）

StrictMode 是 React 专为开发环境设计的调试工具，它会刻意重复执行部分核心函数，目的是帮你提前发现代码中存在的副作用问题（比如未清理的定时器、重复订阅等）。这些被重复执行的操作包括：

• 组件的 render 函数
• useState/useReducer 的函数式更新回调
• useEffect/useLayoutEffect 的回调及清理函数
• 类组件的构造、shouldComponentUpdate 等生命周期方法

你的购物车数量翻倍问题，大概率是因为状态更新逻辑没有使用函数式更新，而是直接依赖了当前的状态变量。当 StrictMode 重复执行状态更新时，由于闭包特性，两次更新都读取到了同一个旧状态值，导致两次更新都基于旧值做了+1操作，最终结果就是数量加了2。

举个反例（你的代码可能类似这样）：

const addToCart = (item) => {
  // 直接依赖当前cart状态，而非函数式更新
  const existing = cart.find(i => i.id === item.id);
  if (existing) {
    setCart(cart.map(i => 
      i.id === item.id ? {...i, quantity: i.quantity + 1} : i
    ));
  } else {
    setCart([...cart, {...item, quantity: 1}]);
  }
};

而正确的写法应该使用函数式更新，让 React 基于最新的状态来计算下一次状态：

const addToCart = (item) => {
  setCart(prevCart => {
    const existing = prevCart.find(i => i.id === item.id);
    if (existing) {
      return prevCart.map(i => 
        i.id === item.id ? {...i, quantity: i.quantity + 1} : i
      );
    } else {
      return [...prevCart, {...item, quantity: 1}];
    }
  });
};

这种写法下，即使 StrictMode 重复执行更新函数，React 会确保只应用最终的正确状态，不会出现数量翻倍的问题。

另外，也有可能是你的代码中存在意外的副作用执行，比如在组件渲染阶段就调用了添加购物车的函数（而非用户点击时触发），StrictMode 导致渲染两次，进而触发两次添加逻辑。比如错误地把函数执行结果绑定到 onClick：

// 错误：每次渲染都会执行addToCart，StrictMode下渲染两次就会加2
<button onClick={addToCart(item)}>添加</button>
// 正确：绑定函数引用，仅在点击时执行
<button onClick={() => addToCart(item)}>添加</button>

总结来说，StrictMode 本身不会破坏功能，它只是暴露了你代码中存在的状态更新逻辑问题或者意外副作用。移除 StrictMode 只是暂时掩盖了问题，修复代码本身的逻辑才是正确解法。

内容的提问来源于stack exchange，提问作者The Noobest Guy