我对开发非常陌生,我创建了过滤器,以便用户更轻松地在网站上搜索特定内容。我的过滤器逻辑有效,但它很长并且效率不高。希望获得一些有关如何使其变得更好的帮助或建议。
const monthNotes = async () => {
const m: any[] = [
{
label: 'All',
value: 'all',
},
{
label: 'January',
value: '01',
},
......
{
label: 'December',
value: '12',
},
];
// creating the list of months for filter options
setFilterMonthOptions(m);
};
const fetchData = async () => {
const n = await Api.getNotes();
setData(n);
setDisplayList(n);
if (n && n.length > 0) {
const m: any[] = [
{
label: 'All',
value: 'all',
},
];
n.forEach(note => {
if (
note.displaystate === Constants.TRUE &&
note.tags &&
note.tags.length > 0
) {
note.tags.forEach((t: string) => {
if (!m.find(o => o.label == t)) {
m.push({
label: t,
value: t,
});
}
});
}
});
setFilterOptions(m);
}
monthNotes();
setLoading(false);
};
// All filters
useEffect(() => {
fetchData();
}, []);
useEffect(() => {
const allData = notes;
let filtered = notes;
// checks to see if filter by feature has any selection made
if (filterOption1 === undefined || filterOption1=== null || filterOption1?.value === 'all') {
setDisplayList(allData );
setActive(allData?.[0]);
}
// filtering by feature
else if (filterOption1?.value !== '') {
filtered = filtered.filter(
(n: any) => n.tags && n.tags?.includes(filterOption1?.value),
);
}
// checks to see if filter by version has any selection made
if (filterOption2 === undefined || filterOption2 === null || filterOption2 ?.value === 'all') {
setDisplayList(allData);
setActive(allData?.[0]);
} // filtering by Version
else if (filterOption2 ?.value !== '') {
filtered = filtered.filter(
(n: any) =>
n.vname &&
getVersionName(n.vname, filterOption2 .value) === String(filterOption2 .value),
);
}
// checks to see if filter by Month has any selection made
if (filterOption3?.value === 'all') {
setDisplayList(allData);
setActive(allData?.[0]);
} // filtering by Month
else if (filterOption3?.value !== '') {
filtered = filtered.filter(
(n: any) =>
n.releasedate &&
getMonthFromDate(n.releasedate, filterOption3?.value) === filterOption3?.value,
);
}
setDisplayList(filtered);
setActive(filtered[0]);
}, [filterOption3, filterOption2 , filterOption1]);
// options for filter by feature
// filter by feature ends
// Options for filter by version
useEffect(() => {
fetchVersionNotes();
}, [filterOption1, filterOption2 ]);
function getVersionName(vname: string, filterValue: any): string {
return String(vname);
}
const fetchVersionNotes = async () => {
let n = [...notes];
if (filterOption1?.value !== '' && filterOption1?.value !== 'all') {
n = n.filter((n: any) => n.tags && n.tags?.includes(filterOption1?.value));
}
if (n && n.length > 0) {
const filteredNotes = n.filter(
(note: any) => note.displaystate === Constants.TRUE,
);
setActive(filteredNotes.find(note => note.id === id) || filteredNotes[0]);
let m: any[] = [
{
label: '',
value: '',
},
];
if (filterOption1?.value === '' || filterOption1?.value === 'all') {
m.push({
label: 'All',
value: 'all',
});
}
n.forEach(note => {
if (note.vname && note.displaystate === Constants.TRUE) {
m.push({
label: note.vname,
value: note.vname,
});
}
});
setFilterVersionOptions(m);
}
setLoading(false);
};
function getMonthFromDate(releaseDate: string, filterValue: any): string {
const dateList = releaseDate.split('-');
return String(dateList[1]);
}
// filter by month ends
目前我的代码能够过滤数据,但是逻辑很长并且使用了很多if语句。我主要是想提高效率。我试图让所有日期都通过一个过滤器,但无法成功,这就是为什么我创建了多个 if 和 else if 语句。