列表找房（三）02-下拉选项功能——PickerView组件 & 调用接口获取筛选条件的数据

下拉选项功能——PickerView组件 & 调用接口获取筛选条件的数据

调用接口获取筛选条件的数据

• PickerView 选择器 https://mobile.ant.design/components/picker-view-cn/

• 先获取当前城市的信息（城市的唯一ID）

• 根据城市ID查询相应的筛选条件数据（四种筛选条件的下拉列表数据）

• 需要重用PickerView组件（前三个筛选菜单进行重用）

  • 需要根据点击的不同菜单传递不同的菜单数据，进而改变组件列表的数据信息

src\wiews\Find\components\Filter\indexjs

const { value } = await getCurrentCity()
const res = await axios.get('/houses/condition', {
  params: {
    id: value
  }
})
this.setState({
  filtersData: res.data.body
})

src\wiews\Find\components\Filter\indexjs

// 渲染 FilterPicker 组件
renderFilterPicker() {
  const {
    openType,
    filtersData: { area, rentType, price, subway }
  } = this.state

  if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
    return null
  }

  // FilterPciker 组件需要的数据
  // cols 表示 PickerView 组件的列数
  let data, cols = 1

  switch (openType) {
    case 'area':
      cols = 3
      data = [area, subway]
      break
    case 'mode':
      data = rentType
      break
    case 'price':
      data = price
      break
    default:
      break
  }

  return (
    <FilterPicker
      data={data}
      cols={cols}
      onSave={this.onSave}
      onCancel={this.onCancel}
    />
  )
}

效果