在使用的react版本如下:
前端父组件代码:
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以上,即没有按照筛选条件进行筛选和显示
已排除数据库里的数据出错的情况,较大可能是后端代码存在写得不恰当的地方
请问后端代码有哪些地方写得不对?
如何修改才能实现按条件筛选条件筛选并显示出正确的数据?
请在现有代码的基础上展示代码举例说明,谢谢
该回答引用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",
};
};