antdmobile Picker组件的onPickerChange事件中setState组件的data属性,选项自动回到第一项
问题描述
需求是一个省市区的级联选择器,省份下面的市和区数据需要异步获取,因此需要在 Picker 组件的 onPickerChange 事件中根据省份切换来切换省份对应的市和区数据,这一步通过 setState 来完成。但 setState 后选择框选项会自动会滚回到第一个选项,按道理应该是停留在对应的选项。但第二次滚动上一次停留的省份时,就不会出现回滚到第一项的情况,如下图所示
问题出现的环境背景及自己尝试过哪些方法
自己曾经尝试省份下面的市和区数据写死在代码中,发现还是会出现上述问题
相关代码
async handlePickerChange(value){
let tempData = [...this.state.addressList];
if (value.length === 1) {
const {cityList} = await this.componentController.getSubAreasList({key: value[0]}, true);
const {districtList} = await this.componentController.getSubAreasList({key: cityList[0].areaId}, false);
let tempCityList = cityList.map(city => {
return {label: city.areaName, value: city.areaId}
});
let tempDistrictList = districtList.map(district => {
return {label: district.areaName, value: district.areaId}
});
tempCityList[0].children = tempDistrictList;
tempData.forEach(item => {
if (item.value === value[0] && !item.children) {
item.children = tempCityList;
}
})
this.setState({addressList: tempData})
} else if (value.length === 2) {
const {districtList} = await this.componentController.getSubAreasList({key: value[1]}, false);
let tempDistrictList = districtList.map(district => {
return {label: district.areaName, value: district.areaId}
});
tempData.forEach(item => {
if (item.children) {
item.children.forEach(i => {
if (i.value === value[1]) {
i.children = tempDistrictList
}
})
}
})
this.setState({
addressList: tempData
})
}
}
render() {
return (
<form>
...
<Picker data={this.state.addressList}
cols={3}
onPickerChange={this.handlePickerChange.bind(this)}
{...getFieldProps('location')}>
<Item arrow="horizontal">省市区</Item>
</Picker>
...
</form>
)
}
你期待的结果是什么?实际看到的错误信息又是什么?
无错误信息
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论