React-window: [react-window-infinite-loader] refのため、子VariableSizeListでresetAfterIndex（）を呼び出すことができません。

作成日 2020年02月09日 · 2コメント · ソース: bvaughn/react-window

こんにちは、InfiniteLoader内の子VariableSizeListでresetAfterIndex（）を呼び出す方法はありますか？

InfiniteLoaderからの参照は次の関数です。

function _setRef() {
  length: 1
  name: ""
  prototype: Object { … }
  <prototype>: function ()

私の現在の「解決策」は、InfiniteLoaderからのものではなく、自分自身の参照を使用することです。

<InfiniteLoader isItemLoaded={isItemLoaded} itemCount={1000} loadMoreItems={loadMoreItems}>
    {({ onItemsRendered }) => {
      return <VariableSizeListWrapper onItemsRendered={onItemsRendered} />;
    }}
</InfiniteLoader>

およびVariableSizeListWrapper内

const ref = React.useRef();
...
React.useEffect(() => {
    if (ref?.current) {
      ref.current.resetAfterIndex(0);
    }
  }, [someCollection]);
...
<VariableSizeList ref={ref} ...
....

すべてが機能しているようです-より多くの要素をロードし、itemSizeが更新され、アイテムが追加または再注文されたときなどですが、次の警告が表示されます： Invalid list ref; please refer to InfiniteLoader documentation.

dist/index.esm.jsを見ると、「_ loadUnloadedRanges」が混乱している可能性がありますが、何も気づいていません。

ソース

RosenTomov

👍1

最も参考になるコメント

ここでの解決策は、「コールバック参照」を使用してVariableSizeList参照のハンドルを取得し、それをInfiniteLoaderも渡すことです。

const yourRef = useRef(null);

<InfiniteLoader {...props}>
  {({ onItemsRendered, ref }) => (
    <List
      ref={list => {
        // Pass List ref through to InfiniteLoader
        ref(list);

        // And store a copy for yourself.
        yourRef.current = list;
      }}
      {...props}
    />
  )}
</InfiniteLoader>;

bvaughn 2020年02月09日

👍14 ❤5 🎉1

全てのコメント2件

ここでの解決策は、「コールバック参照」を使用してVariableSizeList参照のハンドルを取得し、それをInfiniteLoaderも渡すことです。

const yourRef = useRef(null);

<InfiniteLoader {...props}>
  {({ onItemsRendered, ref }) => (
    <List
      ref={list => {
        // Pass List ref through to InfiniteLoader
        ref(list);

        // And store a copy for yourself.
        yourRef.current = list;
      }}
      {...props}
    />
  )}
</InfiniteLoader>;

bvaughn 2020年02月09日

👍14 ❤5 🎉1

同じ問題がありました。 @bvaughn 、解決策をありがとう。

React-windowは素晴らしい小さなパフォーマンスライブラリです。それは非常にうまく機能します。ただし、画像の遅延読み込み（各アイテムが表示されたときにGETリクエストを実際にディスパッチする）が必要な場合、このウィンドウスクロールはまったく効率的ではありません。高速スクロール、または上下に戻るときに確実に発生する問題はほとんどありません。

以前にフェッチされた場合でも、GETリクエストは画像ごとにトリガーされます。したがって、計算上およびバックエンドに大量の負荷をかけます。 CDNを使用していない場合は、莫大な請求書を待って頑張ってください！
アイテムのアンマウント中のデータ漏洩が表示されなくなりました。これは、 useEffect/ componentDidMountで発生し、高速スクロールでアイテムがマウント解除されたときに終了しないajax / async操作が原因です。したがって、これを処理するための複雑なロジックの必要性
状態を使用して既にフェッチされた画像をキャプチャする場合、状態の設定が非同期であり、画像をFIFO順に配置しないと、問題が発生します。

したがって、ここにあるソフトウェアの凡例に、画像の遅延読み込みとreact-windowをうまく組み合わせる機能を追加してもらいたいと思います:)

waleedshkt 2021年02月15日

このページは役に立ちましたか？

0 / 5 - 0 評価

React-window: [react-window-infinite-loader] refのため、子VariableSizeListでresetAfterIndex（）を呼び出すことができません。

最も参考になるコメント

全てのコメント2件

関連する問題