React购物车统计商品数量时渲染数组仅保留最后一项问题求解

• 核心问题是React状态更新的闭包捕获与批量更新机制：当前useEffect作用域内的renderedCart是本次effect运行时的固定快照，你在循环中多次调用updateRenderedCart时，每次展开的...renderedCart都停留在本次effect运行的初始值（通常为空数组），后续的状态更新会覆盖前面的操作，最终只会保留最后一次添加的商品。
• 次要问题：直接给原cartItem对象新增count属性属于修改原始引用数据，可能引发不可预期的副作用。
• 语义问题：单纯遍历不需要返回新数组的场景使用了map方法，不符合map的设计语义，建议使用forEach。

不要在循环里反复调用状态更新函数，先在内存中完成所有商品的统计计算，生成最终的渲染数组后一次性更新状态即可，参考实现如下：

useEffect(() => {
  if (cart.length === 0) {
    updateRenderedCart([]);
    return;
  }
  // 统计商品出现次数，生成最终渲染数组
  const countCache = {};
  const renderedCartResult = [];
  cart.forEach(cartItem => {
    const productId = cartItem.product_id;
    if (!countCache[productId]) {
      // 首次遇到该商品，初始化统计项
      countCache[productId] = {
        ...cartItem, // 拷贝原对象避免修改原始数据
        count: 0
      };
      renderedCartResult.push(countCache[productId]);
    }
    // 累计次数
    countCache[productId].count += 1;
  });
  // 一次性更新状态
  updateRenderedCart(renderedCartResult);
}, [cart]);

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