It is I again. Straight to the point:
I have 3 search fields (dropdown value selects) in my application to filter the products that will be shown to the user. And default should be "Any", so if every field has "any" chosen, it will just bring out every product from the database, and if only one of them has "any" chosen, that search criteria will be ignored and every product with any value of that field will be shown.
Sounds simple enough, but I just cannot get the right way to do it, so here I am here again, hoping for you to help me out here
又是我。开门见山:我在我的应用程序中有3个搜索字段(下拉值选择)来过滤将显示给用户的产品。缺省值应该是“any”,所以如果每个域都选择了“any”,它将从数据库中调出所有产品,如果只有一个选择了“any”,则搜索条件将被忽略,并且将显示具有该字段任意值的所有产品。听起来很简单,但我就是找不到正确的方法来做这件事,所以我又来了,希望你能帮助我
Search Fields:
搜索字段:
const [subject, setSubject] = useState('');
const [status, setStatus] = useState('');
const [district, setDistrict] = useState('');
const handleChange1 = (event) => {
setSubject(event.target.value);
};
const handleChange2 = (event) => {
setStatus(event.target.value);
};
const handleChange3 = (event) => {
setDistrict(event.target.value);
};
<FormControl fullWidth>
<Select
value={subject}
label="subject"
onChange={handleChange3}
>
<MenuItem value={''}>all</MenuItem>
<MenuItem value={'opt1'}>1</MenuItem>
<MenuItem value={'opt2'}>2</MenuItem>
<MenuItem value={'opt3'}>3</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth>
<Select
value={status}
label="status"
onChange={handleChange3}
>
<MenuItem value={''}>all</MenuItem>
<MenuItem value={'opt1'}>1</MenuItem>
<MenuItem value={'opt2'}>2</MenuItem>
<MenuItem value={'opt3'}>3</MenuItem>
</Select>
</FormControl>
<FormControl fullWidth>
<Select
value={district}
label="location"
onChange={handleChange3}
>
<MenuItem value={''}>all</MenuItem>
<MenuItem value={'opt1'}>1</MenuItem>
<MenuItem value={'opt2'}>2</MenuItem>
<MenuItem value={'opt3'}>3</MenuItem>
</Select>
</FormControl>
<TutorList subject={subject} status={status} district={district} />
The page where the products load:
加载产品的页面:
const TutorList = (props) => {
const [tutors, setTutors] = useState([])
useEffect(() => {
const fetchTutors = async () => {
const data = await axios.get(`/api/v1/user/search`, {
params: {
subject: props.subject,
status: props.status,
district: props.district
}
})
setTutors(data.data.users)
}
fetchTutors()
}, [props])
return (
<Fragment>
{tutors.map((tutor) => (
...
))}
</Fragment>
)
}
Backend:
后端:
exports.search = async (request, response, next) => {
const subjectName = request.query.subject
const statusName = request.query.status
const districtName = request.query.district
const users = await User.find({
subject: subjectName,
district: districtName,
students: statusName
})
if (!users) {
return next(
new ErrorResponse(`Users with these parameters don't exist`, 404)
)
}
response.status(200).json({ success: true, users: users })
}
Any ideas on that? It works perfectly fine if all the fields have values specified, but it stops working when one of the search fields is null (has option "any" chosen).
对此有什么想法吗?如果所有字段都指定了值,它就可以很好地工作,但当其中一个搜索字段为空(选择了选项“any”)时,它就会停止工作。
更多回答
优秀答案推荐
It seems you want to filter the query parameter whose value is ''
or falsy value.
您似乎想要筛选值为‘’或False值的查询参数。
e.g. If district
is ''
, it will be filtered.
例如,如果地区是‘’,它将被过滤。
const request = {
query: {
subject: '1',
status: 'ok',
district: ''
}
}
const query = Object.fromEntries(Object.entries(request.query).filter(value => value[1]))
console.log(query)
// User.find(query)
更多回答
我是一名优秀的程序员,十分优秀!