antdmobile Picker组件的onPickerChange事件中setState组件的data属性,选项自动回到第一项

问题描述

需求是一个省市区的级联选择器,省份下面的市和区数据需要异步获取,因此需要在 Picker 组件的 onPickerChange 事件中根据省份切换来切换省份对应的市和区数据,这一步通过 setState 来完成。但 setState 后选择框选项会自动会滚回到第一个选项,按道理应该是停留在对应的选项。但第二次滚动上一次停留的省份时,就不会出现回滚到第一项的情况,如下图所示
gifhome_766x596_14s.gif

问题出现的环境背景及自己尝试过哪些方法

自己曾经尝试省份下面的市和区数据写死在代码中,发现还是会出现上述问题

相关代码

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>
  )
}

你期待的结果是什么?实际看到的错误信息又是什么?

无错误信息

阅读 3.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题