将不同尺寸的相同产品添加到购物车答案

【问题标题】：Add same product with different sizes to the cart将不同尺寸的相同产品添加到购物车
【发布时间】：2021-01-10 00:57:00
【问题描述】：

我可以将不同的产品添加为单独的数组，如果添加相同的产品，也可以增加数量。但现在我需要添加相同的产品但大小不同，它应该创建另一个新数组。下面是我正在使用的代码..请帮忙..!!

switch (action.type) {
case ADD_TO_CART:
    const productId = action.product.id;

    if (findIndex(state.cart, product => product.id === productId) !== -1) {
        const cart = state.cart.reduce((cartAcc, product) => {
            if (product.id === productId) {
                // if (product.size === action.size) {
                    cartAcc.push({ ...product, size: parseInt(product.size), qty: parseInt(product.qty) + parseInt(action.qty), sum: (product.discount ? product.salePrice : product.price) * (parseInt(product.qty) + parseInt(action.qty)) }) // Increment qty
                // } else {
                //     cartAcc.push(product)
                // }

            } else {
                cartAcc.push(product)
            }
            return cartAcc
        }, [])

        return { ...state, cart }
    }
    return {
        ...state,
        cart: [
            ...state.cart,
            {
                ...action.product,
                qty: action.qty,
                size: action.size,
                sum: (action.product.discount ? action.product.salePrice : action.product.price) * action.qty
            }
        ]
    }

【问题讨论】：

你从哪里得到findIndex，是yourArray.findIndex还是你的特殊功能？
这是特殊功能export const findIndex = function (array, cb) { if (array) { for (let i = 0; i < array.length; i++) { if (true === cb(array[i])) return i; } } return -1; }

标签： javascript reactjs redux shopping-cart reducers

【解决方案1】：

您的代码是正确的，但是您需要为每个具有特定属性的产品提供一个唯一的产品 ID。举例

Product: { id: 'Nike' size: ['S', 'M', 'L'] color: ['blue', 'white', 'black']}

您的购物车中有多个商品，此产品示例的 ID：“Nike,s,blue”。每次您尝试使用该特定 ID 查找此产品时，您都可以将其添加为新产品或增加它（如果已存在）。

您可以对 T 恤“L”采取相同的逻辑，其 ID：“Nike,L,blue”。它使它成为一个新产品并分离。

简而言之：您需要为每个产品及其属性创建一个唯一的 ID（您可以根据您拥有数据的 Object.values 或数组将属性与 ID 组合）。

【讨论】：

【解决方案2】：

您几乎完成了，只需检查大小是否相等（在 findIndex 和随后的 if 中）：

const productId = action.product.id;
const size = action.size;

if (findIndex(state.cart, product => (product.id === productId && product.size === size)) !== -1) {
        const cart = state.cart.reduce((cartAcc, product) => {
            if (product.id === productId  && product.size === size) {
                    cartAcc.push({ ...product, size: size, qty: parseInt(product.qty) + parseInt(action.qty), sum: (product.discount ? product.salePrice : product.price) * (parseInt(product.qty) + parseInt(action.qty)) }) // Increment qty
            } else {
                cartAcc.push(product)
            }
            return cartAcc
        }, [])

        return { ...state, cart }
    }

【讨论】：

感谢您的回答，但它给出的错误是“尺寸”未定义。我还需要为 size 创建 const 吗？
太棒了..这工作谢谢...现在我可以在第一次添加相同的产品，尺寸为“s”，然后在单击尺寸选择按钮时添加尺寸为“m”的产品。但在那之后，如果我再次想添加“s”大小，那么它会创建一个新条目。它应该将数量添加到现有大小.. {产品 ID 相同}
如果您使用“s”和“m”作为产品尺寸，那么您不应该将 parseInt 应用于此字段，您应该将其保留为字符串。我已经更新了我的答案。
不不.. 我的尺寸是 6、9、11.. 这就是为什么我使用 parseInt..
如果您使用 parseInt，我建议在比较中将 === 替换为 ==。我们需要一个带有最小示例的代码沙箱来进一步帮助您。