Как правильно отфильтровать массив в зависимости от категории?

Question

[FIain]

Здравствуйте, у меня есть массив pizzas и его апдейтер функция setPizzas, которые находится в главном компоненте App:

код App:

const App = () => {
    const [pizzas, setPizzas] = React.useState<Pizza[]>([]);
    const [cart, setCart] = React.useState<Cart[]>(parseJSON("cart") ?? []);
    const [loading, setLoading] = React.useState<boolean>(true);
    const [errorData, setErrorData] = React.useState<Error | unknown>(null);

    React.useEffect(() => {
        (async () => {
            try {
                const { data } = await api.getPizzas();
                setPizzas(data);
            } catch (error) {
                console.error(error);
                setErrorData(error);
            } finally {
                setLoading(false);
            }
        })();
    }, []);

    React.useEffect(() => localStorage.setItem("cart", JSON.stringify(cart)), [cart]);

    if (errorData || (!loading && !pizzas.length)) {
        return (
            <NotFound
                title='Не удалось получить данные с сервера'
                description='Пожалуйста, проверьте свое соединение с интернетом и обновите страницу'
                reloadButton
                screen
            />
        );
    }

    return (
        <AppContext.Provider value={{ loading, errorData, pizzas, setPizzas, cart, setCart }}>
            <Routing />
        </AppContext.Provider>
    );
};

export default App;

Помимо этого у меня есть компонент CategoriesList, который содержит в себе список категорий. Я пытаюсь реализовать простую фильтрацию по нажатию на конкретную категорию, как видно в примере ниже я попробовал сделать фильтрацию на основе предыдущего стейта, но это неправильно, так-как это отработает только 1 раз и pizzas будет хранить в себе элементы только с одной категорией. Мне нужно обновлять pizzas, но при этом сохранять все его элементы ( я правда не знаю как это сделать и не могу до конца сформулировать правильно ).

код CategoriesList:

const CategoriesList: React.FC<Props> = ({ categories }) => {
    const { setPizzas } = React.useContext(AppContext);

    const [selectedCategorie, setSelectedCategorie] = React.useState(parseJSON(CATEGORIE_KEY) ?? 0);

    const handleClick = (index: number, categorie: number) => {
        setSelectedCategorie(index);
        saveToLocalStorage({ key: CATEGORIE_KEY, data: index });

        setPizzas((prevState) => prevState.filter(({ category }) => category === categorie));
    };

    return (
        <ul className='flex items-center justify-start gap-[30px]'>
            {categories.map(({ name, categorie }, index) => (
                <CategorieItem {...{ key: name, categorie, handleClick, index, name, selectedCategorie }} />
            ))}
        </ul>
    );
};

export default CategoriesList;

Comments

[szQocks]

в компоненте CategoriesList просто отфильтруй по выбранным категориям массив и отрисовывай емаё

[FIain]

szQocks, каким образом? Я же написал, что на основе предыдущего стейта фильтрация будет неправильная

[szQocks]

FIain, понял я чём беда, сделай из selectedCaterogire - selectedCaterogires ( массив с выбранными фильтрами ) и фильтруй массив со своими пиццами уже по массиву выбранных категорий, а не по одной выбранной категории

[FIain]

szQocks, возможно я неправильно понял, но мне массив с выбранными категориями не нужен. У меня есть вот такой список категорий:



Также я не совсем понял как вы рекомендуете фильтровать массив. Ведь по сути это будет одно и тоже, я буду обновлять стейт не на основе одной категории, а на основе N категорий, условно двух, после первой фильтрации ( пусть будет массив категорий такой [1, 2] ), я обновляю стейт и получаю пиццы у которых есть категории 1 и 2, потом, допустим, я захотел добавить 3 категорию ( массив категорий стал [1, 2, 3] ), но pizzas ведь уже был отфильтрован с категориями 1 и 2, поэтому 3 категория никак не отобразиться, в этом и я вся проблема.

[szQocks]

FIain, когда пользователь якобы выбирает какие-либо фильтры - фильтруй по всем этим фильтрам основной массив с пиццами, а не тот что уже отфильтрованный ( не важно добавился или убрался фильтр из массива с фильтрами, отфильтрованный массив не трогаешь, лишь отрисовываешь ) + так же можно для фильтров приоритет сделать, и фильтровать по приоритету например

const [selectedCategories, setSelectedCategoris] = useState([
{
  name: 'Гриль',
  priority: 5
},
{
  name: 'Острые',
  priority: 3
},
])

[szQocks]

так же нужно продумать логику, когда пользователь выбирает "Все" и какой-то из фильтров, или наоборот, выбрал какой-то из фильтров, а потом выбрал все,, и если выбраны все то остальные фильтры конечно не нужны будут, раз у тебя так устроено что пользователь может выбрать несколько фильтров, в общем включай голову

[Сергей Соколов]

Нельзя размещать код картинками. Правила пункт 3.8

Пожалуйста, замените картинки на код текстом, обёрнутый в теги code

Answer 1

[Mikhail Osher]

А зачем хранить отфильтрованные пиццы? Какие-то проблемы с производительностью?
По текущему коду складывается ощущение, что ререндер будет происходить только при смене категории.
Можно спокойно написать categires.filter(...).map(...), вместо попыток построить звезду смерти.

Comments

[FIain]

Возможно стоило указать, что пиццы прокидываются в компонент Home. А categories.filter.map точно не нужно или опять же я вас неправильно понял. Categories это просто харкод категорий. Изначально pizzas я получаю с сервера и потом отображаю их в компоненте Home, а фильтрацию делаю по клику на какую-то категорию и соответственно пытаюсь обновить pizzas, чтобы отображение их поменялось везде где они используются

Home:



Categories:

[Mikhail Osher]

В таком случае, просто заведите второй массив filteredPizzas внутри App.

[FIain]

Mikhail Osher, да, спасибо, создание доп.массива с фильтрованными пиццами помогло, даже немного неловко, что решение было такое простое, я куда-то в дебри ушел :D