React Hooks状态更新后calculate函数不等待导致购物车计数错误

核心问题原因 #

• React的状态更新是异步批量执行的：调用setTestArray后，当前函数作用域内的testArray仍然是本次渲染的旧快照值，不会立刻更新，因此紧接着调用calculate()统计的是更新前的购物车数据，自然计数错误。
• 计数逻辑写法错误：
  1. 遍历计数错误使用map（map用于返回新数组，遍历统计应使用reduce/forEach）
  2. 循环内反复调用setCartCount，且直接基于当前闭包内的旧cartCount值累加，而非先算完总和再一次性赋值，同时你声明的resultCount变量完全未被使用，最终导致计数异常甚至指数级增长。
• async/await改造无效：React的setState不是Promise对象，await无法等待状态更新完成，属于场景误用。
• 额外问题：原代码中product.quantity = 1直接修改了传入的参数对象，属于副作用，可能引发其他隐含问题。

最优解决方案（推荐） #

不需要单独维护cartCount状态，直接通过useMemo基于购物车数组计算总数，完全规避异步更新问题，代码更简洁易维护：

import { useState, useMemo } from 'react';

const [testArray, setTestArray] = useState([]);
const [total, setTotal] = useState(0);
// 购物车总数自动跟随testArray更新
const cartCount = useMemo(() => {
  return testArray.reduce((sum, item) => sum + item.quantity, 0);
}, [testArray]);

function addToTest(product, quantity = 1) {
  setTestArray(prev => {
    const ProductExist = prev.find(item => item.id === product.id);
    if (ProductExist) {
      return prev.map(item => 
        item.id === product.id 
          ? {...ProductExist, quantity: ProductExist.quantity + 1} 
          : item
      );
    } else {
      // 不要修改原product对象，返回新对象
      return [...prev, {...product, quantity: 1}];
    }
  });
}

其他可行方案（如需单独维护cartCount状态） #

方案1：更新数组时同步计算总数 #

在setTestArray的函数式更新回调中拿到最新的数组值，直接计算总数后更新cartCount：

function addToTest(product, quantity = 1) {
  setTestArray(prev => {
    const ProductExist = prev.find(item => item.id === product.id);
    let newTestArray;
    if (ProductExist) {
      newTestArray = prev.map(item => 
        item.id === product.id 
          ? {...ProductExist, quantity: ProductExist.quantity + 1} 
          : item
      );
    } else {
      newTestArray = [...prev, {...product, quantity: 1}];
    }
    // 基于新数组计算总数，一次性更新
    const newCount = newTestArray.reduce((sum, item) => sum + item.quantity, 0);
    setCartCount(newCount);
    return newTestArray;
  });
}

方案2：修正useEffect监听逻辑 #

先计算完最终总和再一次性赋值，不要在循环内累加状态：

useEffect(() => {
  const newCount = testArray.reduce((sum, item) => sum + item.quantity, 0);
  setCartCount(newCount);
}, [testArray]);

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