列表找房（九）-组装筛选数据——进行接口拼接，封装方法 & 接口调用处调用方法 & async异步改同步-打印res接口数据

列表找房-组装筛选数据——进行接口拼接，封装方法 & 接口调用处调用方法 & async异步改同步-打印res接口数据

组装筛选数据-进行接口拼接

   /* 
      组装筛选条件数据：

      ① 在 Filter 组件的 onSave 方法中，根据最新 menuValue 组装筛选条件数据 filter。
      ② 获取区域数据的参数名： area 或 subway（选中值数组的第一个元素）。
      ③ 获取区域数据的值（以最后一个 value 为准）。
      ④ 获取方式和租金的值（选中值的第一个元素）。
      ⑤ 获取筛选（more）的值（将选中值数组转化为以逗号分隔的字符串）。
    */
readyParam = () => {
    // 组合接口查询参数
    let { menuValue } = this.state
    // 参数对象
    let filter = {}
    // 1、获取区域条件参数
    let areaValue = menuValue.area
    // areaKey的值是 area 或者 subway
    let areaKey = areaValue[0]
    if (areaValue.length === 3) {
      // 判断最后一项值是否为null，如果为null，就获取倒数第二项值；如果不为null，就获取最后一项值
      if (areaValue[2] === 'null') {
        // 为null
        filter[areaKey] = areaValue[1]
      } else {
        // 不为null
        filter[areaKey] = areaValue[2]
      }
    }
    // 2、组合方式条件参数
    let mode = menuValue.mode
    filter.rentType = mode[0]

    // 3、组合租金条件参数
    let price = menuValue.price
    filter.price = price[0]

    // 4、组合第四个筛选条件
    // 需要把参数转化为逗号分隔形式的字符串
    let more = menuValue.more
    filter.more = more.join(',')

    return filter
}


  let param = this.readyParam()
      // console.log(param)

param-拼接数据显示

调用接口获取筛选数据

this.setState({
  menuValue: mvalue,
  menuStatus: newMenuStatus,
  openType: ''
}, () => {
  // console.log(this.state.menuValue)
  let param = this.readyParam()
  // console.log(param)
  this.props.loadData(param)
})

loadData = async (param) => {
  // 封装条件查询方法(点击筛选条件的确定按钮后触发)
  param.cityId  = this.state.city.value
  let res = await axios.get('houses', {
    params: param
  })
  //  console.log(res)
  this.setState({
    total: res.body.count,
    listData: res.body.list
  })
}  

打印res

接口数据返回对比