React-VirtualizedのInfiniteScroll/Gridフェッチをどのようにデバッグできますか？

Question

ドキュメントの基本パターン（https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#infiniteloader-and-grid）に続いて、React Virtualized InfiniteList/Gridの組み合わせがあります。

それは2つのことを除いて、素晴らしい作品：

• 私が代わりに追いつくために、物事を待っているのは、あまりにも速くスクロールすると、それがグリッドの一番上にスクロールをリセット

• コンボは、これは特にSTRAある

  • 私は859の結果を持っているにもかかわらず（と私はrowCount小道具として859を提供しているにもかかわらず）...最初のN個の結果（例えば125）を取り出しngeは25の単位で取り出すため、最初の5回はすべて正常に機能し、6回目は不可解に失敗します。

私は何が起こっているのかを把握するために、私はできる限りのことを試してみた、そしてそれは125回の結果で停止し、なぜ私はconsole.logとdebugger文と反応する仮想化されたコードを記入しても、私はまだ把握することはできません（または高速スクロールがリセットされる理由）。

React Virtualizedをよく知っている人は、フェッチや停止を継続するかどうかを決めるコードで、スタートインデックスを0にリセットすることができます。私は、InfiniteScrollのonRowsRenderedとscanForUnloadedRangesとグリッドのonSectionRenderedが関係していると言えますが、値の処理がどこで停止し、実際の「続けるかどうかを決定する」ロジックが始まることはまだ分かりません。

Answer 1

@ brianvaughnが彼のコメントで示唆したように、InfinititeLoaderコンポーネント（https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.js）は部分的に責任があります。行がレンダリングされるたびに_loadUnloadedRangesメソッドがscanForUnloadedRangesから呼び出され、scanForUnloadedRangesが見つかった範囲のロードが処理されます。

しかし、これは方程式の一部に過ぎません。 onRowsRenderedに渡されるパラメータはGridです。 Grid_updateScrollTopForScrollToRow方法は、ユーザーがスクロールと呼ばれ、その方法は、次の行を持っています：あなたはそれを渡されたrowCountに依存して見ることができるようtargetIndexが最終的に影響を与えます

const targetIndex = Math.max(0, Math.min(rowCount - 1, scrollToRow)) 

ことの行がロードされますと、最初は

これは私に問題を引き起こした原因です。私はInfiniteLoader + Listの組み合わせで始まり、その設定では "行"は両方のコンポーネントと同じことを意味します。しかし、その後私はInfiniteLoader + Gridの組み合わせに、Gridには、 "行"はInfiniteLoaderの行の配列です。換言すれば、Grid「行」はセルの行であるが、InfiniteLoader「行」はセルである。

rowCountを計算するための私の方法は、「行」のGrid定義を使用するように変更されましたが、それはInfinniteLoaderに渡されたので、私が代わりに 『行』のInfiniteLoaderの定義を使用している必要があります。言い換えれば、ではなく、ちょうどnumItemsが返されているはずです。

React Virtualizedが他の2つのReact Virtualizedコンポーネントでも（2つの異なる意味で）使用されている名前を使用するのではなく、InfiniteLoaderの「アイテム」の小道具を使用した場合、これはすべて簡単に避けられました...しかし、私は多くのこれらのコンポーネントの仕組みをよりよく理解しています。