<p>react-window-infinite-loader: lista inválida ref</p>

Você está passando a referência da proposta de renderização InfiniteLoader para o componente FixedSizeList ?

Sim, isso é o que eu tenho atualmente:

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

Você pode tentar trocar InfiniteLoader e AutoSizer para que você tenha AutoSizer como o componente externo?

Isso funcionou para mim, se bem me lembro.

Estou tendo o mesmo problema, embora tenha o AutoSizer como o componente externo

Olá @killpowa , você tem um exemplo que eu possa dar uma olhada?

Ei @chrisneven , Aqui está o exemplo - codesandbox

Desde já, obrigado. :)

Olá @ DevAKS-Yara,

Dei uma olhada no seu exemplo e você não está passando o ref do componente InfiniteLoader para o componente da sua lista ( VirtualTable ), então esse é o principal motivo para você receba aquela mensagem invalid ref .

Eu editei seu exemplo e implementei uma versão de trabalho

A principal lição aqui é que quando você deseja outra referência ao componente de lista e também usa o componente InfiniteLoader , você precisa escrever uma função de retorno de chamada que define o InfiniteLoader ref e quaisquer outras referências que você precisar . Veja a função setRefs no componente VirtualTable .

Olá @ DevAKS-Yara,

Dei uma olhada no seu exemplo e você não está passando o ref do componente InfiniteLoader para o componente da sua lista ( VirtualTable ), então esse é o principal motivo para você receba aquela mensagem invalid ref .

Eu editei seu exemplo e implementei uma versão de trabalho

A principal lição aqui é que quando você deseja outra referência ao componente de lista e também usa o componente InfiniteLoader , você precisa escrever uma função de retorno de chamada que define o InfiniteLoader ref e quaisquer outras referências que você precisar . Veja a função setRefs no componente VirtualTable .

Oh! Tentei passar o ref diretamente de InfiniteLoader para VirtualTable mas não deu certo. Qual é a diferença entre usar diretamente a referência passada e configurar por meio da função de retorno de chamada?

BTW, obrigado pela solução! 👍🏼 :)

BTW, obrigado pela solução! 👍🏼 :)

De nada!

Oh! Tentei passar o ref diretamente de InfiniteLoader para VirtualTable mas não deu certo. Qual é a diferença entre usar diretamente a referência passada e configurar por meio da função de retorno de chamada?

Bem, você também pode passar diretamente pelo árbitro, mas, neste caso, aparentemente, você precisa ter várias referências. Usando uma "referência de retorno de chamada", você pode atribuir várias referências a um nó DOM. De preferência, você deve colocá-lo em um gancho useCallback . Isso garante que nossa referência de retorno de chamada não mude entre as novas renderizações.