Ken428965 2023-03-20 12:46 采纳率: 53.6%
浏览 36
已结题

react,页面数据没有按照所筛选的条件进行显示,租金条件为1000以下,但显示出的内容都是租金大于1000的?

在使用的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))
// ...
}
}


后端的代码:

        // 价格
        let price = [{
                label: "不限",
                value: "null"
            },
            {
                label: "1000及以下",
                value: "PRICE|1000"
            },
            {
                label: "1000 - 2000",
                value: "PRICE|2000"
            },
            {
                label: "2000 - 3000",
                value: "PRICE|3000"
            },
            {
                label: "3000 - 4000",
                value: "PRICE|4000"
            },
            {
                label: "4000 - 5000",
                value: "PRICE|5000"
            },
            {
                label: "5000 - 6000",
                value: "PRICE|6000"
            },
            {
                label: "6000 - 7000",
                value: "PRICE|7000"
            },
            {
                label: "7000以上",
                value: "PRICE|7001"
            }
        ];
 
        ctx.body.body = {
            price,
        }
        let {
            price,
        } = ctx.query;
        // 价格
        if (price && price !== "null") {
            if (price <= 7000) {
                search.where.priceNum = {
                    [Op.gte]: +price - 1000,
                    [Op.lte]: +price
                }
            } else {
                search.where.priceNum = {
                    [Op.gte]: 7001
                }
            }
        }


目前效果如下:
点击标题栏弹出相应的Picker模块,选择Picker模块里的其中一项后点击确定(例如选择“1000以下”或者其他选项,显示出的内容全部都在7000以上,即没有按照筛选条件进行筛选和显示
已排除数据库里的数据出错的情况,较大可能是后端代码存在写得不恰当的地方
请问后端代码有哪些地方写得不对?
如何修改才能实现按条件筛选条件筛选并显示出正确的数据?
请在现有代码的基础上展示代码举例说明,谢谢

  • 写回答

1条回答 默认 最新

  • MarkHan_ 2023-03-20 13:25
    关注

    该回答引用GPTᴼᴾᴱᴺᴬᴵ
    根据你提供的代码和问题描述,有以下问题:

    1.在后端代码中,查询价格的方式有误。在查询条件中,将传递的价格 price 作为字符串进行比较,因此比较的结果是字符串的比较,而不是数字的比较。例如,当 price 为 "1000" 时,它会被解释为比较字符串 "1000" 和 "PRICE|1000",结果是不符合预期的。要解决此问题,应将 price 转换为数字类型,然后进行比较。

    2.在前端代码中,调用 API.get 时,传递的筛选条件可能为空对象,这将导致 axios 发出的请求 URL 中不包含任何查询参数。要解决此问题,应该确保筛选条件对象不为空对象,然后再传递给 API.get。

    解决这些问题后,你的代码可能类似于以下代码:

    前端父组件代码:

    import React, { useEffect, useState } from 'react'
    function HouseList() {
    const [filters, setFilters] = useState({}) // 初始化为空对象
    const searchHouseList = async (value) => {
    if (Object.keys(filters).length === 0) { // 如果筛选条件为空对象,不发送请求
    return
    }
    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 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
    // 方式和租金
    filters.mode = mode[0]
    filters.price = +price[0] // 将字符串转换为数字
    // 更多筛选条件 more
    filters.more = more.join(',')
    // 调用父组件中的方法,来将筛选数据传递给父组件
    props.onFilter(filters)
    }
    // ...
    }
    
    
    

    后端的代码:

        // 价格
        let price = [{
                label: "不限",
                value: "null"
            },
            {
                label: "1000及以下",
                value: "PRICE|1000"
            },
            {
                label: "1000 - 2000",
                value: "PRICE|200
    const Op = Sequelize.Op;
    
    // 获取房屋列表
    exports.getHouseList = async (ctx, next) => {
      const {
        cityId,
        startDate,
        endDate,
        ...rest
      } = ctx.query;
      // 查询条件
      const search = {
        where: {},
      };
      if (cityId && cityId !== "null") {
        search.where.cityId = cityId;
      }
      if (startDate && endDate) {
        search.where.startTime = {
          [Op.gte]: startDate,
        };
        search.where.endTime = {
          [Op.lte]: endDate,
        };
      }
    
      // 价格
      let {
        price,
      } = rest;
      if (price && price !== "null") {
        if (price <= 7000) {
          search.where.priceNum = {
            [Op.gte]: +price - 1000,
            [Op.lte]: +price,
          };
        } else {
          search.where.priceNum = {
            [Op.gte]: 7001,
          };
        }
      }
    
      const houseList = await House.findAll(search);
      ctx.body = {
        code: 200,
        data: houseList,
        message: "success",
      };
    };
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月21日
  • 已采纳回答 3月20日
  • 创建了问题 3月20日

悬赏问题

  • ¥15 powerbuilder出现这样的报错
  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上