市面上大多数的sku算法实现方式 都是把sku转换成对象的方式
而我这个是让它自己找 不需要你写什么算法 也没有复杂的嵌套逻辑 非常简单

1.代码结构

{
                "id":"1240167138390765568",
                "typeCode":"sj",
                "typeName":"手机",
                "name":"Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待",
                "title":"建议选购换修无忧月付版首月免费，送杀菌率99.9%手机消毒片！自动订阅，随时可取消！",
                "pic":"[http://img2.sunf.xyz/upload/ohcimeqe/1240161785334788098.jpg](http://img2.sunf.xyz/upload/ohcimeqe/1240161785334788098.jpg)",
                "shareImg":"[http://img2.sunf.xyz/upload/krdl91zg/1240161785334788098.jpg](http://img2.sunf.xyz/upload/krdl91zg/1240161785334788098.jpg)",
                "img":"[http://img2.sunf.xyz/upload/ubxhp6ov/1240161785334788098.jpg](http://img2.sunf.xyz/upload/ubxhp6ov/1240161785334788098.jpg)",
                "prodArea":"中国华强北",
                "price":1,
                "marketPrice":1,
                "content":null,
                "upDown":"0",
                "shopId":"1239475068401594368",
                "shopName":"测试店铺",
                "stock":9987,
                "sales":14,
                "activity":"0",
                "sort":1,
                "skuLevel":3,
                "labels":"",
                "groupaName":"颜色",
                "groupbName":"容量",
                "groupcName":"购买方式",
                "version":null,
                "area":"330203,330206,330212,330282",
                "farmGoodsSkuList":[
                    {
                        "id":"1240168206289924096",
                        "name":"Apple iPhone 11 Pro Max (A2220) 64GB 暗夜绿色 移动联通电信4G手机 双卡双待",
                        "pic":"[http://img2.sunf.xyz/upload/1kf2kx9g/1240161785334788098.jpg](http://img2.sunf.xyz/upload/1kf2kx9g/1240161785334788098.jpg)",
                        "goodsId":"1240167138390765568",
                        "groupa":"暗夜绿色",
                        "groupb":"64GB",
                        "groupc":"公开版",
                        "groupProp":null,
                        "oriPrice":9599,
                        "marketPrice":9599,
                        "price":9599,
                        "stock":9999,
                        "sales":0,
                        "sort":1,
                        "saleNum":null
                    },
                    {
                        "id":"1240168339316469760",
                        "name":"Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色  移动联通电信4G手机 双卡双待Apple iPhone 11 Pro Max (A2220) 256GB 暗夜",
                        "pic":"[http://img2.sunf.xyz/upload/r454molf/1240161785334788098.jpg](http://img2.sunf.xyz/upload/r454molf/1240161785334788098.jpg)",
                        "goodsId":"1240167138390765568",
                        "groupa":"暗夜绿色",
                        "groupb":"256GB",
                        "groupc":"公开版",
                        "groupProp":null,
                        "oriPrice":10899,
                        "marketPrice":10899,
                        "price":10899,
                        "stock":9999,
                        "sales":0,
                        "sort":2,
                        "saleNum":null
                    },
                    {
                        "id":"1240168541117018112",
                        "name":"Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待",
                        "pic":"[http://img2.sunf.xyz/upload/gs3u46ii/1240161785334788098.jpg](http://img2.sunf.xyz/upload/gs3u46ii/1240161785334788098.jpg)",
                        "goodsId":"1240167138390765568",
                        "groupa":"暗夜绿色",
                        "groupb":"512GB",
                        "groupc":"公开版",
                        "groupProp":null,
                        "oriPrice":10899,
                        "marketPrice":10899,
                        "price":10899,
                        "stock":9999,
                        "sales":0,
                        "sort":3,
                        "saleNum":null
                    },
                    {
                        "id":"1240169698619092992",
                        "name":"【换修无忧月付版】Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待",
                        "pic":"[http://img2.sunf.xyz/upload/ys7132fi/1240161785334788098.jpg](http://img2.sunf.xyz/upload/ys7132fi/1240161785334788098.jpg)",
                        "goodsId":"1240167138390765568",
                        "groupa":"暗夜绿色",
                        "groupb":"256GB",
                        "groupc":"换修无忧月付版",
                        "groupProp":null,
                        "oriPrice":10899,
                        "marketPrice":10899,
                        "price":10899,
                        "stock":9987,
                        "sales":14,
                        "sort":3,
                        "saleNum":null
                    },
                    {
                        "id":"1240170089565974528",
                        "name":"【换修无忧月付版】Apple iPhone 11 Pro Max (A2220) 64GB 暗夜绿色 移动联通电信4G手机 双卡双待",
                        "pic":"[http://img2.sunf.xyz/upload/b3znfnn8/1240161785334788098.jpg](http://img2.sunf.xyz/upload/b3znfnn8/1240161785334788098.jpg)",
                        "goodsId":"1240167138390765568",
                        "groupa":"暗夜绿色",
                        "groupb":"64GB",
                        "groupc":"换修无忧月付版",
                        "groupProp":null,
                        "oriPrice":9599,
                        "marketPrice":9599,
                        "price":9599,
                        "stock":9999,
                        "sales":0,
                        "sort":3,
                        "saleNum":null
                    },
                    {
                        "id":"1240170377114873856",
                        "name":"【换修无忧月付版】Apple iPhone 11 Pro Max (A2220) 512GB 暗夜绿色 移动联通电信4G手机 双卡双待",
                        "pic":"[http://img2.sunf.xyz/upload/emkvnfbx/1240161785334788098.jpg](http://img2.sunf.xyz/upload/emkvnfbx/1240161785334788098.jpg)",
                        "goodsId":"1240167138390765568",
                        "groupa":"暗夜绿色",
                        "groupb":"512GB",
                        "groupc":"换修无忧月付版",
                        "groupProp":null,
                        "oriPrice":12699,
                        "marketPrice":12699,
                        "price":12699,
                        "stock":9999,
                        "sales":0,
                        "sort":4,
                        "saleNum":null
                    },
                    {
                        "id":"1242629772762685440",
                        "name":"暗夜红",
                        "pic":"[http://img2.sunf.xyz/upload/alxesi0k/1241972007737212930.jpg](http://img2.sunf.xyz/upload/alxesi0k/1241972007737212930.jpg)",
                        "goodsId":"1240167138390765568",
                        "groupa":"暗夜红",
                        "groupb":"1",
                        "groupc":"贷款",
                        "groupProp":null,
                        "oriPrice":1,
                        "marketPrice":1,
                        "price":1,
                        "stock":9999,
                        "sales":0,
                        "sort":1,
                        "saleNum":null
                    }
                ],
                "farmShop":null
            },

后台通过返回一个
skuLevel跟farmGoodsSkuList字段来控制对应的sku展示
skuLevel对应你要读取farmGoodsSkuList数组中每个对象的a,b,c字段 按照长度来分割

// 这里就是将筛选出来的数据进行合并的地方
  getSkuGroup = (list, skuLevel) => {
    return list.map((e) => {
      const arr = ['a', 'b', 'c'].slice(0, skuLevel)
      return arr.reduce((a, b,index) => {
        return a + e['group' + b] + ((index <= skuLevel - 1 ) ? ',' : '' )
      }, '')
    })
  }

  // 4.从列表筛选出包含skuName的数据以后 然后将数据进行合并处理
  // 如 我筛选出来全部包含2gb的规格 但是这些规格分别包含在
groupa,groupb,groupc这几个字段里面 我需要根据skuLevel将这些字段进行合并
变成['黑色','2gb','256gb']
  getFilterSkuItemList = ({ list, item, name, skuLevel } = {}) => {
    const data = this.getSkuGroup(list.filter((el) => el['group' + name] == item['group' + name]), skuLevel)
    return data
  }

  getSkuItemData = (name, list, isEnd, skuLevel) => {
    // 3.这里使用lodash将每一行的数据进行合并 得到一个去重以后的行数据
   比如一行里面有两个2GB会将其进行合并
    const filterData = uniqBy(list, 'group' + name)
    return filterData.map((e) => (
      {
        ...e,
        // 合并以后 你就可以根据当前所在规格是第几行拿对应数据的skuName
        name: e['group' + name],
        // 这里是整个算法的核心
       // 这里实现的非常简单 就是通过自己skuName 然后在list里面找 只要跟这个名字相关的 我就认为这个肯定是跟sku绑定的如 我现在所在的sku规格是2gb的 那么我只要搜索出所有跟2gb有关的规格 那么必定就是有效的 在后面判断是否禁用非常有用
        skuData: this.getFilterSkuItemList({ list, item: e, name, skuLevel })
      }
    ))
  }
  
 //2.上一步拿到分组以后 在这里解析分组结构 因为已经知道每个分组是属于a,b,c哪一行了 所以这边直接遍历指定行就能拿到对应标题跟每一行的数据
  findSkuData = (name, findData, isEnd, skuLevel) => {
    return {
      title: findData['group' + name + 'Name'],
      data: this.getSkuItemData(name, findData.farmGoodsSkuList, isEnd, skuLevel)
    }
  }

  getSkuList = (data) => {
    const { skuLevel } = data
    // 1.这里通过skuLevel并且使用数组截取的方式来遍历得到一个分组 
    return ['a', 'b', 'c'].slice(0, skuLevel).map((e, i) => this.findSkuData(e, data, i == skuLevel - 1, skuLevel))
  }

上面的东西简单几步就是
1.筛选出你的规格楼层
2.根据你的规格楼层每一个子项的skuName 筛选出所有包含这个skuName的规格
3.然后将规格进行重组变成一个数组并保存起来
4.每次点击的时候 将你当前已经被选中的skuName跟每个item的skuData比较
如你的skuData是['黑色','2gb','256'] 你当前选了['黑色','','']
那么将你的选中的结果去空以后 变成['黑色'] 然后跟['黑色','2gb','256'] 比较 只要黑色包含在里面 我就认为你这个skuItem是不需要禁用的 否则应该禁用
代码如下

  // skuData就是每个skuItem所保存的符合条件的值
  getSkuButtonDisable = (skuData) => {
    const { skuText = '' } = this.state
   // 先进行一下去空
    const skuTextArr = skuText.split(',').filter((e)=>e)
    if (skuTextArr.length == 0) return false
    return !skuData.some((e) => {
      if (skuText) {
       //转换skuData的每一项为数组 并且跟skuTextArr做比较 如果有任意一个条件在里面的话 就变成可用 反之全部禁用 
        return e.split(',').some((e) => skuTextArr.indexOf(e) !== -1)
      } else {
        return true
      }
    })
  }

至此所有的sku功能全部就实现了 包括了禁用启用跟sku的选中之类的整套流程
代码不多 如果有问题 可以加我qq:469373256