在使用的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))
// ...
}
}
目前效果如下:
点击“区域”标题栏弹出相应的Picker模块,选择里面的“地铁”选项,然后选择第二列里其中任意一项,点击确定:
界面显示找不到结果:
查看浏览器里的network,显示:
检查过数据库,符合地铁线路条件的数据有很多,但不知为何筛选不出来,且只有地铁线路这个条件出这个问题,其他选项没有出现问题
已排除数据库里的数据出错的情况,可能是前端代码存在写得不恰当的地方
请问代码有有写得不对的地方吗?
如何修改才能实现按条件筛选条件筛选并显示出正确的数据?
请在现有代码的基础上展示代码举例说明,谢谢