<p>react-window-infinite-loader : référence de liste non valide</p>

Vous êtes de passage l'arbitre de la InfiniteLoader rendre accessoire à FixedSizeList composante?

Oui voilà ce que j'ai actuellement :

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

Pouvez-vous essayer d'échanger InfiniteLoader et AutoSizer afin d'avoir AutoSizer comme composant externe ?

Cela a fonctionné pour moi si je me souviens bien.

J'ai le même problème même si j'ai AutoSizer comme composant externe

Salut @killpowa , avez-vous un exemple que je peux consulter ?

Hé @chrisneven , voici l'exemple - codesandbox

Merci d'avance. :)

Salut @DevAKS-Yara,

J'ai examiné votre exemple et vous ne transmettez pas le ref du composant InfiniteLoader à votre composant de liste ( VirtualTable ), c'est donc la principale raison pour laquelle vous reçois ce invalid ref message.

J'ai modifié votre exemple et mis en place une version de travail

Le principal à retenir ici est que lorsque vous souhaitez une autre référence au composant de liste et que vous utilisez également le composant InfiniteLoader , vous devez écrire une fonction de rappel qui définit la référence InfiniteLoader et toutes les autres références dont vous avez besoin . Voir la fonction setRefs dans le composant VirtualTable .

Salut @DevAKS-Yara,

J'ai examiné votre exemple et vous ne transmettez pas le ref du composant InfiniteLoader à votre composant de liste ( VirtualTable ), c'est donc la principale raison pour laquelle vous reçois ce invalid ref message.

J'ai modifié votre exemple et mis en place une version de travail

Le principal à retenir ici est que lorsque vous souhaitez une autre référence au composant de liste et que vous utilisez également le composant InfiniteLoader , vous devez écrire une fonction de rappel qui définit la référence InfiniteLoader et toutes les autres références dont vous avez besoin . Voir la fonction setRefs dans le composant VirtualTable .

Oh! J'ai essayé de passer ref directement de InfiniteLoader à VirtualTable mais ça ne s'est pas bien passé. Quelle est la différence entre l'utilisation directe de la référence transmise et la configuration via la fonction de rappel ?

BTW, merci pour la solution! :)

BTW, merci pour la solution! :)

De rien!

Oh! J'ai essayé de passer ref directement de InfiniteLoader à VirtualTable mais ça ne s'est pas bien passé. Quelle est la différence entre l'utilisation directe de la référence transmise et la configuration via la fonction de rappel ?

Eh bien, vous pouvez également passer directement la référence, mais dans ce cas, vous avez apparemment besoin de plusieurs références. En utilisant une "référence de rappel", vous pouvez attribuer plusieurs références à un nœud DOM. De préférence, vous devriez le mettre dans un crochet useCallback . Cela garantit que notre référence de rappel ne change pas entre les nouveaux rendus.