反应：将多个过滤器应用于数组

Question

我从 react 开始，我有一个名为 arrayToFilter 的对象数组，我想对其应用多个过滤器，理想情况下，当用户更改过滤器选择选项时，所有过滤器都应应用于该数组，并将结果返回到一个已过滤的结果数组中以显示，我已经有了每个过滤器函数及其常量，但我不知道如何一个接一个地应用所有过滤器......

这是我的代码：

    const [ arrayToFilter, setArrayToFilter ] = useState([ /*array of objects to apply filters to*/ ]);
    const [ filteredResults, setFilteredResults] = useState([ /*array of filtered objects*/ ]);
    const [ categoryOptions, setCategoryOptions ] = useState([ 1,2,3 ]);
    const [ selectedCategoryOptions, setSelectedCategoryOptions ] = useState([ ]);
    const [ searchName, setSearchName ] = useState('');
    const [ hideVenuesWithoutDiscounts, setHideVenuesWithoutDiscounts ] = useState(true);

    const filterHideVenuesWithoutDiscounts = () => 
    {
        if(hideVenuesWithoutDiscounts)
        {
            return arrayToFilter.filter(item => item.discounts.length > 0);
        }
        else
        {
            return arrayToFilter;
        }   
    };

    const filterSelectedCategoryOptions = () => 
    {
        return arrayToFilter.filter(item => item.category_id.includes(selectedCategoryOptions));
    };

    const filtersearchName = () => 
    {
        return arrayToFilter.filter(item =>  item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1);
    };

    useEffect(() => 
    {
        //Filter options updated so apply all filters here
    },
    [searchName, hideVenuesWithoutDiscounts, selectedCategoryOptions]);

注意 useEffect, afaik 这就像 vue 中的 watch 属性，我想在过滤器输入更改时触发所有过滤器

Answer 1

您可以在数组中将多个过滤器链接在一起。

arrayToFilter
.filter(item => item.category_id.includes(selectedCategoryOptions))
.filter(item => item.discounts.length > 0)
.filter((item) => item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1)

Answer 2

很简单，您可以将过滤后的数组作为参数传递给过滤函数，以便它们可以过滤过滤后的数组。

例如：

const filterHideVenuesWithoutDiscounts = (array) => {
    if (hideVenuesWithoutDiscounts) {
        return array.filter((item) => item.discounts.length > 0);
    } else {
        return array;
    }
};

const filterSelectedCategoryOptions = (array) => {
    return array.filter((item) => item.category_id.includes(selectedCategoryOptions));
};

const filtersearchName = (array) => {
    return array.filter((item) => item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1);
};

useEffect(() => {
    //Filter options updated so apply all filters here
    let result = arrayToFilter;
    result = filterHideVenuesWithoutDiscounts(result);
    result = filterSelectedCategoryOptions(result);
    result = filtersearchName(result);
    setArrayToFilter(result);
}, [searchName, hideVenuesWithoutDiscounts, selectedCategoryOptions]);