如何将三个过滤器合并到一个 if 语句中?

问题描述 投票:0回答:0

我对开发非常陌生,我创建了过滤器,以便用户更轻松地在网站上搜索特定内容。我的过滤器逻辑有效,但它很长并且效率不高。希望获得一些有关如何使其变得更好的帮助或建议。

     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 语句。

filter logic tsx
© www.soinside.com 2019 - 2024. All rights reserved.