javascript - 动态选择产品变体，比较 2 个阵列

Question

抱歉，标题不好，想不出更好的标题。

产品选项:

[
  {
    "_id": "5cdd1e81e85ecc7ebb145039",
    "name": "Sizes S/M - M/L - L/XL ",
    "display_name": "Size",
    "display_style": "rectangle",
    "values": [
      {
        "_id": "5cdd1e81e85ecc7ebb14503a",
        "label": "Small / Medium",
        "option_id": "5cdd1e81e85ecc7ebb145039"
      },
      {
        "_id": "5cdd1e81e85ecc7ebb14503b",
        "label": "Large / X-Large",
        "option_id": "5cdd1e81e85ecc7ebb145039"
      },
      {
        "_id": "5da8080ea51d8207e9098875",
        "label": "Medium / Large",
        "option_id": "5cdd1e81e85ecc7ebb145039"
      }
    ]
  },
  {
     "_id": "5cdd280ce85ecc7ebb145040",
    "name": "Hat Sizes Νο 56-57 / 58-59 / 60-61",
    "display_name": "Hat Size",
    "display_style": "rectangle",
    "values": [
      {
        "_id": "5cdd280ce85ecc7ebb145041",
        "label": "56 / 57",
        "option_id": "5cdd280ce85ecc7ebb145040"
      },
      {
        "_id": "5cdd280ce85ecc7ebb145042",
        "label": "58 / 59",
        "option_id": "5cdd280ce85ecc7ebb145040"
      },
      {
        "_id": "5cdd280ce85ecc7ebb145043",
        "label": "60 / 61 ",
        "option_id": "5cdd280ce85ecc7ebb145040"
      }
    ]
  }
]

产品变体:

[
  {
    "_id": "5e0a02e4413f9e12f20edfb5",
    "options": [
      {
        "option": {
          "_id": "5cdd1e81e85ecc7ebb145039",
          "display_name": "Size",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd1e81e85ecc7ebb14503a",
          "label": "Small / Medium",
          "option_id": "5cdd1e81e85ecc7ebb145039"
        }
      },
      {
        "option": {
          "_id": "5cdd280ce85ecc7ebb145040",
          "display_name": "Size Hat",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd280ce85ecc7ebb145041",
          "label": "56 / 57",
          "option_id": "5cdd280ce85ecc7ebb145040"
        }
      }
    ]
  },
  {
    "_id": "5e0a02e4413f9e12f20edfb6",
    "options": [
      {
        "option": {
          "_id": "5cdd1e81e85ecc7ebb145039",
          "display_name": "Size",

          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd1e81e85ecc7ebb14503a",
          "label": "Small / Medium",
          "option_id": "5cdd1e81e85ecc7ebb145039"
        }
      },
      {
        "option": {
          "_id": "5cdd280ce85ecc7ebb145040",
          "display_name": "Size Hat",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd280ce85ecc7ebb145042",
          "label": "58 / 59",
          "option_id": "5cdd280ce85ecc7ebb145040"
        }
      }
    ]
  },
  {
    "_id": "5e0a02e4413f9e12f20edfb9",
    "options": [
      {
        "option": {
          "_id": "5cdd1e81e85ecc7ebb145039",
          "display_name": "Size",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd1e81e85ecc7ebb14503b",
          "label": "Large / X-Large",
          "option_id": "5cdd1e81e85ecc7ebb145039"
        }
      },
      {
        "option": {
          "_id": "5cdd280ce85ecc7ebb145040",
          "display_name": "Size Hat",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd280ce85ecc7ebb145042",
          "label": "58 / 59",
          "option_id": "5cdd280ce85ecc7ebb145040"
        }
      }
    ]
  },
  {
    "_id": "5e0a02e4413f9e12f20edfba",
    "options": [
      {
        "option": {
          "_id": "5cdd1e81e85ecc7ebb145039",
          "display_name": "Size",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd1e81e85ecc7ebb14503b",
          "label": "Large / X-Large",
          "option_id": "5cdd1e81e85ecc7ebb145039"
        }
      },
      {
        "option": {
          "_id": "5cdd280ce85ecc7ebb145040",
          "display_name": "Size Hat",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd280ce85ecc7ebb145043",
          "label": "60 / 61 ",
          "option_id": "5cdd280ce85ecc7ebb145040"
        }
      }
    ]
  },
  {
    "_id": "5e0a02e4413f9e12f20edfbc",
    "options": [
      {
        "option": {
          "_id": "5cdd1e81e85ecc7ebb145039",
          "display_name": "Size",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5da8080ea51d8207e9098875",
          "label": "Medium / Large",
          "option_id": "5cdd1e81e85ecc7ebb145039"
        }
      },
      {
        "option": {
          "_id": "5cdd280ce85ecc7ebb145040",
          "display_name": "Size Hat",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd280ce85ecc7ebb145042",
          "label": "58 / 59",
          "option_id": "5cdd280ce85ecc7ebb145040"
        }
      }
    ]
  },
  {
    "_id": "5e0a02e4413f9e12f20edfbb",
    "options": [
      {
        "option": {
          "_id": "5cdd1e81e85ecc7ebb145039",
          "display_name": "Size",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5da8080ea51d8207e9098875",
          "label": "Medium / Large",
          "option_id": "5cdd1e81e85ecc7ebb145039"
        }
      },
      {
        "option": {
          "_id": "5cdd280ce85ecc7ebb145040",
          "display_name": "Size Hat",
          "display_style": "rectangle"
        },
        "value": {
          "_id": "5cdd280ce85ecc7ebb145041",
          "label": "56 / 57",
          "option_id": "5cdd280ce85ecc7ebb145040"
        }
      }
    ]
  }
]

我有这段代码(React 组件的一部分):

setVariant = (optionIndex, valueIndex) => {
    const { product } = this.state;
    const parentProduct = { ...product };

    const optionValue = parentProduct.options[optionIndex].values[valueIndex];

    const emptyArr = [];

    parentProduct.variants.forEach(({ options }) => {
      options.forEach((item) => {
        if (item.value._id === optionValue._id) {
          emptyArr.push(...options);
        }
      });
    });

    const updatedOptions = parentProduct.options.map((productOption) => {
      const productOptions = JSON.parse(JSON.stringify(productOption));

      productOptions.values = productOptions.values.map((productOptionValue) => {
        productOptionValue.disabled = emptyArr.every(
          ({ value: { _id } }) => productOptionValue._id !== _id
        );
        return productOptionValue;
      });
      return productOptions;
    });

我对这个片段的问题是它正确设置了禁用属性，例如。如果我选择第一个 Size e.x. 小/中，然后 Size Hat 60/61 被禁用，我可以单击其他两个选项。但如果我点击另一个 Size Hat 58/59 则 Large/X-Large 将不会启用。

这就是我想要实现的目标:

但这就是我得到的:(当更改 56/57 等时，然后 Sizes 例如 Large/X-Large如果在变体数组中找到，则应启用，红色代表禁用按钮)

Answer 1

您可以为每个选项的值创建一个映射，该映射将引用其他选项的相应值。例如，大小值的映射应如下所示:

{
  sizeValueIdA: [hatSizeValueA, hatSizeValueB],
  sizeValueIdB: [hatSizeValueB],
  sizeValueIdC: []
}

因此，通过此 map ，您可以轻松获取可用帽子尺寸值的列表，了解所选尺寸的值。

这是一个代码示例，允许您通过尺寸值 ID 获取帽子尺寸值的列表，反之亦然。我认为，有了这些数据，您可以轻松禁用 UI 中的选项(如果这些选项不在这些列表中)

const sizeToHatSize = convertOptionToValueMap(productOptions[0]);
const hatSizeToSize = convertOptionToValueMap(productOptions[1]);

productVariants.forEach(variant => {
  const sizeValueId = variant.options[0].value._id;
  let hatSizeValueId = variant.options[1].value._id;
  sizeToHatSize[sizeValueId].push(hatSizeValueId);
  hatSizeToSize[hatSizeValueId].push(sizeValueId);
});

function convertOptionToValueMap(option) {
  return option.values.reduce((dict, sizeOptionValue) => {
    dict[sizeOptionValue._id] = [];
    return dict;
  }, {});
}

describe('59543685', function() {
  it('should return available Hat Sizes for selected Size', function() {
    const sizeValueId = '5cdd1e81e85ecc7ebb14503a';
    expect(sizeToHatSize[sizeValueId]).toEqual([
      '5cdd280ce85ecc7ebb145041',
      '5cdd280ce85ecc7ebb145042',
    ]);
  });

  it('should return available Sizes for selected Hat Size', function() {
    const hatSizeValueId = '5cdd280ce85ecc7ebb145041';
    expect(hatSizeToSize[hatSizeValueId]).toEqual([
      '5cdd1e81e85ecc7ebb14503a',
      '5da8080ea51d8207e9098875'
    ]);
  });
});

在我的示例中，我使用了数组，但您可以选择 map 而不是数组来快速检查选项是否可用。

const siteToHatSize = {
  sizeValueIdA: {hatSizeValueA: true, hatSizeValueB: true},
  sizeValueIdB: {hatSizeValueB: true},
  sizeValueIdC: {}
}

const isEnabled = siteToHatSize[selectedSizeValueId][hatSizeId] // you can use it in render function

此外，在您的情况下，只有 2 个选项，您也可以将问题视为二维矩阵。每个变体只是行(帽子尺寸的值)和列(尺寸的值)之间的交集。

[          /*Small*/ /*Medium*/ /*Large*/ 
 /*56-57*/ [     1,          0,        1],
 /*58-59*/ [     1,          1,        0],
 /*60-61*/ [     0,          0,        1],
]

也许这对你来说更合适:)