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

发布于 2022-09-12 01:05:48 字数 2202 浏览 47 评论 0

问题描述

需求是一个省市区的级联选择器,省份下面的市和区数据需要异步获取,因此需要在 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>
  )
}

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

无错误信息

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文