javascript - 将过滤器应用于列表并显示数据
问题描述
前端:
const [searchParameters, setSearchParameters] = useState({
type: "",
country:"",
});
const onChangeSearchType = e => {
const workingObject = {...searchParameters};
workingObject.searchType = e.target.value;
setSearchParameters(workingObject);
};
const onChangeSearchCountry = e => {
const workingObject = {...searchParameters};
workingObject.searchCountry = e.target.value;
setSearchParameters(workingObject);
};
const handleFetchWithSearchParameters = () => {
TutorialDataService.findByParameters(searchParameters)
.then(response => {
setTutorials(response.data);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
之后return()
:
<Form.Control as="select" defaultValue=""
type="text"
className="form-control"
id="country"
required
value={searchParameters.country}
onChange={onChangeSearchCountry}
name="country">
<option>Nigeria</option>
<option>Ghana</option>
<option>Kenya</option>
<option>Senegal</option>
</Form.Control>
<Form.Control as="select" defaultValue=""
type="text"
className="form-control"
id="type"
required
value={searchParameters.type}
onChange={onChangeSearchType}
name="type">
<option>Agricultural</option>
<option>Manufacturing</option>
<option>Industrial</option>
<option>Livestock</option>
<option>Service Industry</option>
</Form.Control>
<div className="input-group-append">
<button
className="btn btn-outline-secondary"
type="button"
onClick={handleFetchWithSearchParameters}
Search
</button>
服务.js:
import http from "../http-common.js";
const findByParameters = searchParameters => {
// This is the destructuring syntax I've linked above
const { type, country, creditscore, interest } = searchParameters;
// Here we use & ampersand to concatinate URL parameters
return http.get(`/tutorials?type=${type}&country=${country}&creditscore=${creditscore}&interest=${interest}`);
};
export default {
findByParameters
};
控制器.js:
// Retrieve all Industries from the database.
exports.findAll = (req, res) => {
const type = req.query.type ;
let condition = type ? { type : { [Op.like]: %${type }% } } : null;
Tutorial.findAll({
where: condition,
order: [ ['createdAt', 'DESC'] ]
})
.then(data => { res.send(data);
})
.catch(err => {
res.status(500).send({ message:err.message || "Some error occurred while retrieving tutorials."
});
}); };
因此,我的网络应用程序的这个页面用于显示保存在我的数据库中的所有公司的列表。
我创建了一个过滤器,允许您仅显示特定类型的过滤器,通过findByType
.
我想插入其他过滤器,例如:findByRevenue
, findByEmployeesNumber
.
不知道是否应该为每种情况在前端和后端都编写新函数?还是有更聪明的方法?
此外,过滤器不必单独工作,它们还需要组合在一起以改进您的搜索。我希望我已经很好地解释了它应该如何工作,就像任何电子商务网站一样。
编辑:我按照建议更改了代码,但我仍然遇到问题。它不再让我使用输入表单。事实上,请求是空的,例如:
type = ""
country = ""
我觉得我有问题input.value =
解决方案
只是一个意见:我会稍微修改前端和后端以支持组合请求。您可以使用不同的参数将 JavaScript 对象(作为 JSON)发送到您的 API,并在后端控制器函数中应用检查。
所以基本上,而不是分开
const findByType = () => {...}
const findByRevenue = () => {...}
const findByEmployeesNumber = () => {...}
我会使用(状态可以是一个整体对象,如下例所示,或者在发送到 API 时分离然后组装成一个对象)
const [searchParameters, setSearchParameters] = useState({
type: '',
revenue: '',
employeesNumber: ''
});
const onChangeSearchType = e => {
const workingObject = {...searchParameters};
const workingObject.searchType = e.target.value;
setSearchParameters(workingObject);
};
// same logic for onChangeRevenue and onChangeEmployeesNumber
const handleFetchWithSearchParameters = () => {
TutorialDataService.findByParameters(searchParameters)
.then(response => {
setTutorials(response.data);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
}
然后在控制器中,我会破坏查询对象并针对它运行查询
推荐阅读
- excel - 遍历工作簿并将值复制并粘贴到另一个工作簿(VBA、Excel)
- c# - 可空分析器不考虑使用 FluentAssertions NotBeNull
- javascript - 如何获取其中执行函数的结果,进行转换并返回
- qt - Qt的QTest不会通过单击选择下拉列表中的项目
- python - 在单独的python文件中运行新编写的函数并在主文件中调用它时面临问题
- javascript - d3 调整水平条形图 y 轴的大小
- turbo-prolog - Turbo Prolog 中的斐波那契数列
- python - 如何在 Pandas 数据框中将时间戳转换为整数。我尝试了 to_numeric() 函数,但它不起作用
- java - 使用 Spring Boot 2 WebClient 从响应中获取标头
- informatica - 什么时候更喜欢动态查找而不是静态查找?我们可以使用动态 lkp 执行 SCD type2 吗?