使用每个产品的数量在购物车中呈现产品

Question

下面是我的 API 为用户购物车返回的数组响应：

[
  {
    id: 13,
    user_id: 13,
    product_id: 8,
    product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1'
  },
  {
    id: 14,
    user_id: 13,
    product_id: 8,
    product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1'
  },
  {
    id: 15,
    user_id: 13,
    product_id: 8,
    product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1'
  },
  {
    id: 27,
    user_id: 13,
    product_id: 2,
    product_name: 'Canon 100% Genuine Original Pixma TS3140 AIO Wirel'
  },
  {
    id: 29,
    user_id: 13,
    product_id: 9,
    product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA'
  },
  {
    id: 30,
    user_id: 13,
    product_id: 9,
    product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA'
  },
  {
    id: 31,
    user_id: 13,
    product_id: 9,
    product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA'
  },
  {
    id: 32,
    user_id: 13,
    product_id: 26,
    product_name: 'Viewsonic Viewsonic 3600 Lumens HDMI VGA AV Projec'
  }
]

我需要获取每个产品在数组中出现的次数，然后进行渲染。 我尝试创建一个新数组“renderedCart”，并将不存在的产品按出现次数推送到其中。 由于某种原因，数组中唯一的产品是最后一个。 这是执行此操作的 function：

useEffect(() => {
  if (cart.length > 0) {
    // At least one product in cart
    cart.map((cartItem) => {
      var count = 0;
      renderedCart.map((cartProduct) => {
        if (cartProduct.product_id === cartItem.product_id) {
          count++;
        }
      });
      if (count === 0) {
        // product not found in rendered cart

        var cartFilter = cart.filter(
          (item) => item.product_id === cartItem.product_id
        );
        var product = cartItem;
        product.count = cartFilter.length;
        updateRenderedCart([...renderedCart, product]);
      }
    });
  }
}, [cart]);

Answer 1

我建议按产品 ID 将数组减少为 object 的产品计数。

const counts = cart.reduce((counts, { product_id }) => ({
  ...counts,
  [product_id]: (counts[product_id] || 0) + 1,
}), {});

示例结果：

{
  "2": 1,
  "8": 3,
  "9": 3,
  "26": 1
}

 const cart = [ { id: 13, user_id: 13, product_id: 8, product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1' }, { id: 14, user_id: 13, product_id: 8, product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1' }, { id: 15, user_id: 13, product_id: 8, product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1' }, { id: 27, user_id: 13, product_id: 2, product_name: 'Canon 100% Genuine Original Pixma TS3140 AIO Wirel' }, { id: 29, user_id: 13, product_id: 9, product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA' }, { id: 30, user_id: 13, product_id: 9, product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA' }, { id: 31, user_id: 13, product_id: 9, product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA' }, { id: 32, user_id: 13, product_id: 26, product_name: 'Viewsonic Viewsonic 3600 Lumens HDMI VGA AV Projec' } ]; const counts = cart.reduce((counts, { product_id }) => ({...counts, [product_id]: (counts[product_id] || 0) + 1, }), {}); console.log(counts);

然后，当您映射要呈现的购物车时，使用item.product_id来查找商品数量。

如果您只想呈现一个简化的购物车，那么不要返回 object 计数的 map，而是将购物车简化为一个数组。

const cartWithQuantities = Object.values(
  cart.reduce((cart, item) => ({
    ...cart,
    [item.product_id]: {
      ...item,
      quantity: (cart[item.product_id]?.quantity || 0) + 1
    },
  }), {})
);

 const cart = [{ id: 13, user_id: 13, product_id: 8, product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1' }, { id: 14, user_id: 13, product_id: 8, product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1' }, { id: 15, user_id: 13, product_id: 8, product_name: 'Lenovo Ideapad Intel Celeron 1TB HDD 8GB RAM Win 1' }, { id: 27, user_id: 13, product_id: 2, product_name: 'Canon 100% Genuine Original Pixma TS3140 AIO Wirel' }, { id: 29, user_id: 13, product_id: 9, product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA' }, { id: 30, user_id: 13, product_id: 9, product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA' }, { id: 31, user_id: 13, product_id: 9, product_name: 'Lenovo Ideapad 14inch AMD Quad Core 1TB HDD 8GB RA' }, { id: 32, user_id: 13, product_id: 26, product_name: 'Viewsonic Viewsonic 3600 Lumens HDMI VGA AV Projec' } ]; const cartWithQuantities = Object.values( cart.reduce((cart, item) => ({...cart, [item.product_id]: {...item, quantity: (cart[item.product_id]?.quantity || 0) + 1 }, }), {}) ); console.log(cartWithQuantities);