<p>React-Window-Infinite-Loader: Ungültige Listenreferenz</p>

Übergeben Sie die Referenz von der InfiniteLoader Render-Requisite an die FixedSizeList Komponente?

Ja, das habe ich derzeit:

<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>

Können Sie versuchen, InfiniteLoader und AutoSizer vertauschen, sodass Sie AutoSizer als äußere Komponente haben?

Das hat bei mir funktioniert, wenn ich mich richtig erinnere.

Ich habe das gleiche Problem, obwohl ich den AutoSizer als äußere Komponente habe

Hallo @killpowa , hast du ein Beispiel, das ich mir anschauen kann?

Hey @chrisneven , hier ist das Beispiel - Codesandbox

Danke im Voraus. :)

Hallo @DevAKS-Yara,

Ich habe mir dein Beispiel angesehen und du übergibst ref von der InfiniteLoader Komponente an deine Listenkomponente ( VirtualTable ), also ist das der Hauptgrund für dich bekomme diese invalid ref Nachricht.

Ich habe dein Beispiel bearbeitet und eine funktionierende Version implementiert

Die wichtigste Erkenntnis hier ist, dass Sie, wenn Sie eine weitere Referenz auf die Listenkomponente wünschen und auch die Komponente InfiniteLoader möchten, eine Callback-Funktion schreiben müssen, die die Referenz InfiniteLoader und alle anderen benötigten Referenzen festlegt . Siehe die Funktion setRefs in der Komponente VirtualTable .

Hallo @DevAKS-Yara,

Ich habe mir dein Beispiel angesehen und du übergibst ref von der InfiniteLoader Komponente an deine Listenkomponente ( VirtualTable ), also ist das der Hauptgrund für dich bekomme diese invalid ref Nachricht.

Ich habe dein Beispiel bearbeitet und eine funktionierende Version implementiert

Die wichtigste Erkenntnis hier ist, dass Sie, wenn Sie eine weitere Referenz auf die Listenkomponente wünschen und auch die Komponente InfiniteLoader möchten, eine Callback-Funktion schreiben müssen, die die Referenz InfiniteLoader und alle anderen benötigten Referenzen festlegt . Siehe die Funktion setRefs in der Komponente VirtualTable .

Oh! Ich habe versucht, den Ref direkt von InfiniteLoader an VirtualTable aber es hat nicht gut geklappt. Was ist der Unterschied zwischen der direkten Verwendung von übergebenen Referenzen und der Einrichtung über die Callback-Funktion?

BTW, danke für die Lösung! :)

BTW, danke für die Lösung! :)

Gern geschehen!

Oh! Ich habe versucht, Ref direkt von InfiniteLoader an VirtualTable aber es hat nicht gut geklappt. Was ist der Unterschied zwischen der direkten Verwendung von übergebenen Referenzen und der Einrichtung über die Callback-Funktion?

Nun, Sie könnten die Referenz auch direkt übergeben, aber in diesem Fall benötigen Sie anscheinend mehrere Referenzen. Durch die Verwendung einer "Callback-Ref" können Sie einem DOM-Knoten mehrere Referenzen zuweisen. Vorzugsweise sollten Sie es in einen useCallback Hook setzen. Dadurch wird sichergestellt, dass sich unsere Callback-Ref zwischen den erneuten Renderings nicht ändert.