ФИЛЬТРАЦИЯ с реагирующим КОНТЕКСТОМ; как обновить

Я пытаюсь преобразовать массив и получить глобальное состояние, используя контекст для каждого нового массива: 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 — контекст, ответ не просвети меня. Есть ли какой-то стандартный шаблон для него, который мне не хватает?


person dennyalem    schedule 08.02.2021    source источник