如何匹配用户选中的商品变体与GraphQL返回数据获取对应ID和售价

解决方案 #

核心逻辑是遍历所有变体，校验每个变体的属性是否全部匹配用户选中的属性，而不是逐个属性单独匹配。

可直接使用的实现代码 #

// 入参1：用户已选中的属性state，入参2：GraphQL返回的所有变体节点
function findVariationProduct(userSelectedVariations, allVariationNodes) {
  return allVariationNodes.find(variation => {
    // 把当前变体的属性转成键值对格式，方便后续对比
    const variationAttrMap = variation.attributes.nodes.reduce((result, attr) => {
      result[attr.name] = attr.value
      return result
    }, {})

    // 校验当前变体是否满足所有用户选中的属性
    return Object.entries(userSelectedVariations).every(([attrKey, selectedValue]) => {
      // 拼接pa_前缀和接口返回的属性名对齐
      return variationAttrMap[`pa_${attrKey}`] === selectedValue
    })
  })
}

调用方式 #

// 执行匹配
const matchedVariation = findVariationProduct(variations, product.variations.nodes)

if (matchedVariation) {
  // 直接取你需要的参数
  const { databaseId, regularPrice } = matchedVariation
  // 后续处理逻辑写在这里
} else {
  // 无匹配变体的逻辑处理
}

之前代码的问题 #

你之前的写法是循环每个选中的属性，单独找匹配的变体，没有要求所有属性同时匹配同一个变体，自然没法得到符合全部筛选条件的结果。

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