我有一堆数据,我正在从json文件中读取。
我需要实现一些过滤器,这些过滤器将根据检查的过滤器返回正确的数据。
我正在使用反应和 redux 和 - 研究数据来自复选框或下拉列表。
过滤以便它们很好地协同工作的最佳方法是什么?
目前,它们单独工作,但当您将它们一起使用时会中断。
这是我的代码:
function filterStudies(studyData){
let searchTerm = studyData.searchTerm === undefined ? '' : studyData.searchTerm;
let studies = studyData.studies.filter((val)=> val.name.toUpperCase().includes(searchTerm.toUpperCase()));
if(typeof(studyData.isLive) !== 'undefined'){
studies = studyData.isLive ? studies.filter((val) => val.live === studyData.isLive) : studyData.studies;
}
if(typeof(studyData.isCompleted) !== 'undefined'){
studies = studyData.isCompleted ? studies.filter((val) => val.completed === studyData.isCompleted) : studyData.studies;
}
if(typeof(studyData.media) !== 'undefined'){
studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) => val.media === studyData.media);
}
if(typeof(studyData.environment) !== 'undefined'){
studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) => val.environment === studyData.environment);
}
return studies;
}
我不确定我是否很了解你。
但无论如何,乍一看,我认为你的最后if
应该是:
if(typeof(studyData.environment) !== 'undefined'){
studies = studyData.environment === 'All' ? studyData.studies : studies.filter((val) => val.environment === studyData.environment);
}
而不是:
if(typeof(studyData.environment) !== 'undefined'){
studies = studyData.media === 'All' ? studyData.studies : studies.filter((val) => val.environment === studyData.environment);
}
顺便说一句,我建议简化依赖于单个过滤器的代码,该过滤器决定应保留哪些项目以及应丢弃哪些项目。
举个例子(我不明白到底是什么假装做你的代码,所以我几乎不会这样做(,但我希望它可以作为一个例子:
function filterStudies(studyData){
let searchTerm = studyData.searchTerm === undefined ? '' : studyData.searchTerm;
let studies = studyData.studies.filter(function(val) {
if (val.name.toUpperCase().includes(searchTerm.toUpperCase())) return true;
if (val.live === studyData.isLive) return true;
if (val.completed === studyData.isCompleted) return true;
if (studyData.media === 'All' || val.media === studyData.media) return true;
if (studyData.environment === 'All' || val.environment === studyData.environment) return true;
return false;
});
return studies;
}
注意:显然,这些"如果"可以组合成一个(它们执行"或"(。我试图提供一个尽可能接近的例子 到您的原始代码,但实际上,这种方式会更多 反正可读...