Отреагировать на проблему с хуками, когда применен бесконечный пейджинговый фильтр - PullRequest
Новая
       3

Отреагировать на проблему с хуками, когда применен бесконечный пейджинговый фильтр

0 голосов
/ 23 января 2020

У меня есть бесконечная настройка подкачки в реактивном проекте с избыточностью, подобном этому. 

const ItemDashboard = () => {

  const items= useSelector(state => state.items.items);
  const dispatch = useDispatch();
  const [loadedItems, setLoadedItems] = useState([]);
  const [categories, setCategories] = useState([
    'cycling',
    'diy',
    'electrical',
    'food',
    'motoring',
    'travel'
  ]);
  const initial = useRef(true);
  const [loadingInitial, setLoadingInitial] = useState(true);
  const [moreItems, setMoreItems] = useState([]);

  const onChangeFilter = (category, show) => {
    !show
      ? setCategories(categories.filter(c => c != category))
      : setCategories([...categories, category]);
  };

  const loadItems = () => {
     dispatch(getItems(categories, items && items[items.length - 1]))
        .then(more => setMoreItems(more));
  }

  const getNextItems = () => {
    loadItems();
  };

  useEffect(() => {
    if(initial.current) {
      loadItems();
      setLoadingInitial(false);
      initial.current = false;
    } 
  }, [loadItems]);

  useEffect(() => {
    if(items) {
      setLoadedItems(loadedItems => [...loadedItems, ...items]);
    }
  }, [items]);

  useEffect(() => {
      //this effect is fired on intial load which is a problem!
      setLoadingInitial(true);
      initial.current = true;
  }, [categories]);

  return (
    <Container>
      <Filter onFilter={onChangeFilter} categories={categories} />
      {loadingInitial ? (
        <Row>
          <Col sm={8} className='mt-2'>
            <LoadingComponent />
          </Col>
        </Row>
      ) : (
        <ItemList
          items={loadedItems}
          getNextItems={getNextItems}
          moreItems={moreItems}
        />
      )}
    </Container>
  );
};

В компоненте фильтра при изменении фильтра запускается метод обработчика onChangeFilter, который обновляет массив категорий в штат. Когда этот фильтр изменен, мне нужно установить загруженный элемент в состояние пустого массива и снова вызвать обратный вызов load items, но я не могу понять, как это сделать. Если я добавлю еще один обработчик эффекта с зависимостью от состояния категорий, он также сработает при начальной загрузке. Я, наверное, все делаю неправильно, потому что это кажется немного хакерским. Любой совет высоко ценится.

...