最近在跟着老师做一个我的项目，在我的项目过程中遇到了动静生成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。