Rerender списка по клику на кнопку

Question

Использую пакеты react-window, react-virtualized-auto-sizer, react-window-infinite-loader: по нажатию на кнопку "Сортировать по убыванию/возрастанию" хочу сделать rerender всего списка(и чтобы скролл был установлен на начальную позицию). Сейчас после нажатия на кнопку ничего не меняется, но после того как начинаем скроллить, новые запросы уже приходят как нужно

https://codesandbox.io/s/large-data-sort-74ll6?file=/src/App.js

Answer 1

нашел в документации react-window-infinite-loader, кажется это именно ваша проблема:

"Some use cases require cached items to be reset. For example, after a list has been sorted, previously cached items may be invalid. You can let InfiniteLoader know that it needs to reload cached items by calling the resetloadMoreItemsCache method."

function ExampleWrapper({
  // ...
  sortOrder,
}) {
  // We create a reference for the InfiniteLoader
  const infiniteLoaderRef = useRef(null);
  const hasMountedRef = useRef(false);

  // Each time the sort prop changed we called the method resetloadMoreItemsCache to clear the cache
  useEffect(() => {
    // We only need to reset cached items when "sortOrder" changes.
    // This effect will run on mount too; there's no need to reset in that case.
    if (hasMountedRef.current) {
      if (infiniteLoaderRef.current) {
        infiniteLoaderRef.current.resetloadMoreItemsCache();
      }
    }
    hasMountedRef.current = true;
  }, [sortOrder]);
  
  // ...

  // We passed down the ref to the InfiniteLoader component
  return (
    <InfiniteLoader
      ref={infiniteLoaderRef}
      isItemLoaded={isItemLoaded}
      itemCount={itemCount}
      loadMoreItems={loadMoreItems}
    >
      {({ onItemsRendered, ref }) => (
        // ...
      )}
    </InfiniteLoader>
  );
}

https://codesandbox.io/embed/lucid-tree-7wnrq

БЛОГ НА HUSL

Rerender списка по клику на кнопку

Ответы (1 шт):