uni-data-picker在readonly和map属性同时配置时,数据异步加载时的bug
- Dominant language
- JavaScript
- Stars
- 2.1k
- Forks
- 661
- PR merge metrics
- No merged PRs in 30d
Description
# 版本信息
HbuilderX 5.15
uni-ui 中 uni-data-picker版本 2.0.2
vue3
## 问题代码片段
```vue
{{ error }}
{{ data[data.length - 1].text }}
请选择
```
## uni-data-picker中涉及readonly的回显处理片段
```javascript
_processReadonly(dataList, value) {
var isTree = dataList.findIndex(item => {
return item.children;
});
if (isTree > -1) {
let inputValue;
if (Array.isArray(value)) {
inputValue = value[value.length - 1];
if (typeof inputValue === 'object' && inputValue.value) {
inputValue = inputValue.value;
}
} else {
inputValue = value;
}
this.inputSelected = this._findNodePath(inputValue, this.localdata);
return;
}
if (!this.hasValue) {
this.inputSelected = [];
return;
}
let result = [];
if (Array.isArray(value)) {
for (let i = 0; i < value.length; i++) {
var val = value[i];
var item = dataList.find(v => {
return v.value == val;
});
if (item) {
result.push(item);
}
}
} else {
let item = dataList.find(v => {
return v.value == value;
});
if (item) {
result.push(item);
}
}
if (result.length) {
this.inputSelected = result;
}
},
```
问题描述:在传入的localData和readonly属性均依赖异步接口获取时,存在数据竞态更新导致的回显问题
- 排查发现uni-data-picker代码实现中,在dataList.find中使用的是硬编码的value,并未根据传入的map处理,此外匹配失败时未正确清空this.inputSelected的值,使得组件偶尔回显上一次匹配的值
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with uni-data-picker's _processReadonly method and trace how asynchronous localdata and readonly updates reach dataList.find. Reproduce the issue using the supplied Vue 3 example with map set to name/id. Done means the readonly value resolves through the configured mapping and a failed match cannot leave the previous selection displayed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100