Ken428965 2022-12-28 21:49 采纳率: 53.6%
浏览 9
已结题

react,选择某个筛选条件,数据库里符合此条件的结果有很多,但筛选结果为0?

在使用的react版本如下:

img

父组件代码:

import React, { useEffect, useState } from 'react'
function HouseList() {
// ...
  const [filters, setFilters]  = useState({})
  const searchHouseList = async (value) => {
    await API.get('/houses', {
      params: {
        cityId: value,
        ...filters,
        start: 1,
        end: 20
      }
    }).then(res => {
      console.log(filters)
// ...
    })
  }
  const onFilter = filters => {
    setFilters(filters)
  }
useEffect(() => {
  searchHouseList(value)
}, [filters])
// ...
return (
// ...
)
}
export default HouseList


子组件代码:

function Filter(props) {
// ...
  const onSave = (type, itemValue) => {
// ...
    const { area, mode, price, more } = newSelectedValues
    // 此处可以成功获取到四项筛选数据
    // console.log('区域',area)
    // console.log('方式',mode)
    // console.log('租金',price)
    // console.log('筛选',more)
    // 筛选条件数据
    const filters = {}
    // 以下代码就不能将获取到的四项筛选数据传给filters,暂时未找到原因何在
    // 区域
    const areaKey = area[0]
    let areaValue = 'null'
    if (area[3] && area[3] !=='null' ) {
      areaValue = area[3]
    } else if (area[2] && area[2] !=='null') {
      areaValue = area[2]
    } else if (area[1] && area[1] !=='null') {
      areaValue = area[1]
    }
    filters[areaKey] = areaValue
    // console.log('位置1',areaValue)
    // 方式和租金
    filters.mode = mode[0]
    // console.log('位置2',mode[0])
    filters.price = price[0]
    // console.log('位置3',price[0])
    // 更多筛选条件 more
    filters.more = more.join(',')
    // console.log('位置4',more.join(','))
    // 调用父组件中的方法,来将筛选数据传递给父组件
    props.onFilter(filters)
    // console.log('位置5',filters)
    // console.log('位置6',props.onFilter(filters))
// ...
}
}


目前效果如下:
点击“区域”标题栏弹出相应的Picker模块,选择里面的“地铁”选项,然后选择第二列里其中任意一项,点击确定:

img

界面显示找不到结果:

img

查看浏览器里的network,显示:

img

检查过数据库,符合地铁线路条件的数据有很多,但不知为何筛选不出来,且只有地铁线路这个条件出这个问题,其他选项没有出现问题

已排除数据库里的数据出错的情况,可能是前端代码存在写得不恰当的地方
请问代码有有写得不对的地方吗?
如何修改才能实现按条件筛选条件筛选并显示出正确的数据?
请在现有代码的基础上展示代码举例说明,谢谢

  • 写回答

1条回答 默认 最新

  • 夜郎king 2022博客之星IT其它领域TOP 12 2022-12-29 09:56
    关注

    这种问题也是要后台配置联调,前端可以根据接口看一下请求参数有没有传对,是不是参数传错了。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 12月29日
  • 已采纳回答 12月29日
  • 创建了问题 12月28日

悬赏问题

  • ¥15 maccms影视模板 制作影视网站失败 求
  • ¥15 stm32按键设置闹钟数进退位不正常
  • ¥15 三电平逆变器中点电位平衡问题
  • ¥20 这怎么写啊 java课设
  • ¥15 用C语言完成一个复杂的游戏
  • ¥15 如何批量更改很多个文件夹里的文件名中包含文件夹名?
  • ¥50 MTK手机模拟HID鼠标出现卡顿
  • ¥20 求下下面这个数据结构代码
  • ¥20 前端 二进制文件流图片转化异常
  • ¥15 github上的这个C语言项目如何跑起来