如何調試React-Virtualized的InfiniteScroll/Grid Fetch？

我有一個React虛擬化無限列表/網格組合，遵循文檔（https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#infiniteloader-and-grid）的基本模式。如何調試React-Virtualized的InfiniteScroll/Grid Fetch？

它的偉大工程，除了兩件事情：

如果我滾動太快，而不是等待的東西追趕，它的滾動重置爲網格的頂部
該組合只取前N個結果（例如125）......即使我有859次的結果（儘管我已經提供了859作爲rowCount道具）
- 這是特別斯特拉nge，因爲它以25爲增量提取，所以這意味着一切正常工作的前5次，然後莫名其妙地失敗了六號。

我試着盡我所能弄清楚是怎麼回事，並與console.log和debugger聲明我仍然無法弄清楚，爲什麼它停止在125分的結果，即使當我填的是虛擬化做出反應代碼（或爲什麼快速滾動重置）。

能否讓更熟悉React Virtualized的人將我指向代碼中確定是否繼續提取或停止（並可能將啓動索引重置爲0）的位置？我可以告訴InfiniteScroll的onRowsRendered和scanForUnloadedRanges和Grid的onSectionRendered都涉及到，但我仍然無法確定值處理停止的位置，並開始實際的「決定是否繼續」邏輯。

來源

2017-02-11 machineghost

附上一個Plnkr，舉例說明你在做什麼。 – brianvaughn

不幸的是，創建示例涉及的代碼太多。然而，我並不是在尋找解決我的具體問題的方法，只是想了解React-Virtualized如何工作（特別是決定是否繼續提取或停止）。 – machineghost

那麼我可能會說你已經知道，但是，決定何時加載數據的組件是'InfiniteLoader'，它在這裏：https://github.com/bvaughn/react-virtualized/blob/master/source/ InfiniteLoader/InfiniteLoader.js。它不是太大，所以也許值得通過源代碼進行掃描。我還寫了一個如何使用'InfiniteLoader'的方法：https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnIniteiteLoadingList.md和另一個例子：https：// github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#infiniteloader-and-list – brianvaughn

由於@ brianvaughn在他的評論中提出，InfinititeLoader組件（https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.js）是部分原因。每當呈現行_loadUnloadedRanges方法從scanForUnloadedRanges被調用，並且它處理加載scanForUnloadedRanges找到的範圍。

但是，這只是方程的一部分。傳遞到onRowsRendered的參數來自Grid。該Grid_updateScrollTopForScrollToRow方法被調用當用戶滾動，並且該方法具有以下行：

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

這targetIndex最終將影響該行獲得加載，因爲你可以看到它取決於傳入的rowCount原來。

這是對我造成的問題。我開始使用InfiniteLoader + List組合，並且在該設置中，「行」對於這兩個組件意味着相同的事情。然而，我然後切換到InfiniteLoader + Grid組合，並且對於Grid「行」是InfiniteLoader行的陣列。換句話說，Grid「行」是一行單元格，但InfiniteLoader「行」是一個單元格。

改變我的計算方法rowCount使用「行」的Grid定義，但因爲它被傳遞到InfinniteLoader我應該用一個‘行’，而不是InfiniteLoader的定義。換句話說，我應該只返回numItems，而不是numItems/columnCount。

如果React Virtualized對InfiniteLoader使用了「items」道具，而不是使用兩個其他React虛擬化組件使用的名稱（具有兩種不同含義），但所有這些都可以輕鬆避免......但至少現在我有一個很多更好地瞭解這些組件如何工作。

來源

2017-02-15 19:29:15 machineghost

如何調試React-Virtualized的InfiniteScroll/Grid Fetch？

回答

相關問題