<p>react-window-infinite-loader：無効なリスト参照</p>

InfiniteLoaderレンダープロップからFixedSizeListコンポーネントに参照を渡しますか？

ええ、これは私が現在持っているものです：

<InfiniteLoader
  isItemLoaded={index => index < items.length}
  itemCount={1000}
  threshold={20}
  loadMoreItems={loadMoreItems}
  ref={infiniteLoaderRef}
>
  {({ onItemsRendered, ref }) => (
    <AutoSizer style={{ minHeight: "800px" }}>
      {({ height, width }) => (
        <VariableSizeGrid
          columnWidth={_index => width / numberOfColumns}
          columnCount={numberOfColumns}
          rowCount={Math.ceil(items.length / numberOfColumns)}
          rowHeight={_index => heightOfRow}
          height={height}
          width={width}
          ref={ref}
        >
          {props => <GridItem {...props} />}
        </VariableSizeGrid>
      )}
    </AutoSizer>
  )}
</InfiniteLoader>

InfiniteLoaderとAutoSizer入れ替えて、外側のコンポーネントとしてAutoSizerてみてください。

私が正しく覚えていれば、それは私にとってはうまくいきました。

AutoSizerを外部コンポーネントとして使用しているのに、同じ問題が発生します

こんにちは@killpowa 、私が見ることができる例がありますか？

ねえ@chrisneven 、ここに例があります-codesandbox

前もって感謝します。 :)

こんにちは@ DevAKS-ヤラ、

私はあなたの例を見てみましたが、 InfiniteLoaderコンポーネントからリストコンポーネント（ VirtualTable ）にrefを渡していないので、それがあなたの主な理由ですそのinvalid refメッセージを取得します。

私はあなたの例を編集し、動作するバージョンを実装し

ここでの主なポイントは、リストコンポーネントへの別の参照が必要で、 InfiniteLoaderコンポーネントも使用する場合、 InfiniteLoader refおよびその他の必要な参照を設定するコールバック関数を作成する必要があるということです。 。 VirtualTableコンポーネントのsetRefs関数を参照してください。

こんにちは@ DevAKS-ヤラ、

私はあなたの例を見てみましたが、 InfiniteLoaderコンポーネントからリストコンポーネント（ VirtualTable ）にrefを渡していないので、それがあなたの主な理由ですそのinvalid refメッセージを取得します。

私はあなたの例を編集し、動作するバージョンを実装し

ここでの主なポイントは、リストコンポーネントへの別の参照が必要で、 InfiniteLoaderコンポーネントも使用する場合、 InfiniteLoader refおよびその他の必要な参照を設定するコールバック関数を作成する必要があるということです。 。 VirtualTableコンポーネントのsetRefs関数を参照してください。

おお！ refをInfiniteLoaderからVirtualTable直接渡してみましたが、うまくいきませんでした。 渡されたrefを直接使用することと、コールバック関数を介して設定することの違いは何ですか？

ところで、解決策をありがとう！ 👍🏼:)

ところで、解決策をありがとう！ 👍🏼:)

どういたしまして！

おお！ refをInfiniteLoaderからVirtualTable直接渡してみましたが、うまくいきませんでした。 渡されたrefを直接使用することと、コールバック関数を介して設定することの違いは何ですか？

参照を直接渡すこともできますが、この場合は明らかに複数の参照が必要です。 「コールバック参照」を使用すると、DOMノードに複数の参照を割り当てることができます。 できれば、 useCallbackフックに入れる必要があります。 これにより、コールバック参照が再レンダリング間で変更されないことが保証されます。