Я пытаюсь преобразовать массив и получить глобальное состояние, используя контекст для каждого нового массива: itemsAll -> itemsFiltered -> ItemsSorted -> ...
. Поэтому я помещаю функцию фильтра в поставщика контекста следующим образом:
import React, { createContext, useState, useContext } from "react";
import { FiltersItemsCurrentContext } from "../../filtersItems/filtersItemsCurrentContext";
import { ItemsAllContext } from "../itemsAllContext";
export const ItemsFilteredContext = createContext();
const ItemsFilteredContextProvider = (props) => {
const { itemsAll } = useContext(ItemsAllContext);
const { continent, country } = useContext(FiltersItemsCurrentContext)
let itemsFilteredHere = itemsAll.slice();
if (continent !== "") { itemsFilteredHere = itemsFilteredHere.filter( item => item.continent === continent ); }
if (country !== "") { itemsFilteredHere = itemsFilteredHere.filter( item => item.country === country ); }
const [itemsFiltered, setItemsFiltered] = useState(itemsFilteredHere);
const updateItemsFiltered = () => {
setItemsFiltered(itemsFilteredHere)
}
return (
<ItemsFilteredContext.Provider value={{ itemsFiltered, updateItemsFiltered }}>
{props.children}
</ItemsFilteredContext.Provider>
);
};
export default ItemsFilteredContextProvider;
Однако теперь, когда фильтры изменяются (FiltersItemsCurrentContext
), фильтр элементов не обновляется, а остается в соответствии со значением по умолчанию, определенным в useState(itemsFilteredHere)
, без обновления до нового значения для itemsFiltered
здесь. Как я могу обновить его, если я каждый раз вызываю функцию updateItemsFitlered
от потребителя?
Я нашел аналогичную проблему: Сортировка и фильтрация React — контекст, ответ не просвети меня. Есть ли какой-то стандартный шаблон для него, который мне не хватает?