共计 3153 个字符，预计需要花费 8 分钟才能阅读完成。
最近在跟着老师做一个我的项目，在我的项目过程中遇到了 动静生成 Select的一系列问题，针对解决方案做一个简略的记录。
需要形容如下：
- 将后端获取的对象依据 varName 分类后，依据不同的类别生成 Select
- 将抉择获取到的数据，点击确定后，合并成一个 Obj 最终存入数组中
遇到问题如下：
- 依据 varName 动静生成 Select，显示不同的 VarLable 及 VarItemLable
- 点击确定后，Select 显示的信息停留，无奈更改
抉择实现后 Value 无奈清空的解决办法：
- 问题形容
当点击确认选则后，会呈现如下状况，此时数据抉择完结，然而事实的仍然是上次抉择的数据，因而，如果再新增或抉择完全相同的数据，会导致新增数据为空。
当我将 Value 属性设置为固定值时，又会导致抉择后，只事实我设置的固定，交互体验很差。
当我参考网上的解决办法将值设置为 Undefined 的时候，会呈现抉择后只显示 placeholder 属性的值，尽管点击胜利，但用户看不到。 - 此时，我又在想为什么不设置一个 state 数据，通过 setState 进而管制 Select 值的显示，然而前文提到我在动静生成多个 Select 因而一个值，并不足以咱们来管制 Value 的显示状况。
-
解决方案
我将抉择的数据及属性以键值对的形式存储到一个对象中，又因为我时按照 varName 进行分组后渲染的 Select，因而我只须要找到对象中每一个 Select 对应的 VarName 的值是否存在？如果不存在则为 undefined，此时默认显示的是 placeholder 属性，然而当抉择后，出现的则是选中的对应的值。如果咱们想要点点击后，清空 Value，咱们只须要清空对象，这样所有的 Select 便当的都是 undefined，完满解决！局部数据如下：
- 原数据中存在反复数据
- 须要对数据进行排序解决
data: [
{
"varItemId": 14,
"varItemLabel": "ANT1",
"varItemValue": "1",
"varName": "ANT",
"description": "ANT1",
"variableLabel": "天线",
"sort": "1",
"checked": false
},
{
"varItemId": 100,
"varItemLabel": "TX",
"varItemValue": "TX",
"varName": "TYPE",
"description": "TX",
"variableLabel": "类型",
"sort": "2",
"checked": false
},
{
"varItemId": 1,
"varItemLabel": "2G4",
"varItemValue": "2G4",
"varName": "G",
"description": "2G4",
"variableLabel": "频段",
"sort": "3",
"checked": false
},
{
"varItemId": 2,
"varItemLabel": "5G",
"varItemValue": "5G",
"varName": "G",
"description": "5G",
"variableLabel": "频段",
"sort": "3",
"checked": false
},
{
"varItemId": 10,
"varItemLabel": "11N",
"varItemValue": "11N",
"varName": "PRO",
"description": "11N",
"variableLabel": "协定",
"sort": "4",
"checked": false
},
{
"varItemId": 5,
"varItemLabel": "20M",
"varItemValue": "20",
"varName": "BW",
"varFilter": "","description":"20M","variableLabel":" 带宽 ","sort":"5","checked": false
},
{
"varItemId": 289,
"varItemLabel": "MCS4",
"varItemValue": "4",
"varName": "RATE",
"varFilter": "11AX,160M",
"description": "MCS4",
"variableLabel": "速率",
"sort": "6",
"checked": false
},
{
"varItemId": 638,
"varItemLabel": "5.5M",
"varItemValue": "5.5",
"varName": "RATE",
"varFilter": "11B",
"description": "CCK 调制",
"variableLabel": "速率",
"sort": "6",
"checked": false
},{
"varItemId": 45,
"varItemLabel": "CH56",
"varItemValue": "5280",
"varName": "CH",
"varFilter": "5G,20M",
"description": "CH56",
"variableLabel": "信道",
"sort": "7",
"checked": false
},{
"varItemId": 636,
"varItemLabel": "CH58",
"varItemValue": "5290",
"varName": "CH",
"varFilter": "5G,80M",
"description": "CH58",
"variableLabel": "信道",
"sort": "7",
"checked": false
}
]
}数据处理操作如下：
- 引入 lodash 库中的 groupby 办法，依据 varName 进行分组。
const dealedDataByGroup = groupBy(dealedData, (item) => [item.varName]);- 对数据的去重的排序解决，遍历分组后的数据，调用函数如下：
doSrotByAttribute(arr, attribute) {function compare(propertyName) {return function (object1, object2) {const value1 = parseFloat(object1[propertyName]);
const value2 = parseFloat(object2[propertyName]);
if (value2 < value1) {return 1;}
if (value2 > value1) {return -1;}
return 0;
}
}
arr.sort(compare(attribute));
return arr;
}
doUniqueByVarItemLabel(arr) {const hash = {};
arr = arr.reduce((preVal, curVal) => {hash[curVal.varItemLabel] ? '' : hash[curVal.varItemLabel] = true && preVal.push(curVal);
return preVal
}, [])
return arr;
}
dealedDataByGroup[key] = this.doSrotByAttribute(dealedDataByGroup[key], `varItemLabel`);
dealedDataByGroup[key] = this.doUniqueByVarItemLabel(dealedDataByGroup[key]);- 因为不分明 return 返回的执行语句中能够遍历 Obj 的办法，因而我抉择了应用 concat 办法将所有数组存储到一个数组中，两个 map 嵌套遍历生成 Select，最终实现动静生成 Select。
正文完