<p>react-window-infinite-loader: ref de lista no válida</p>

¿Está eliminando el árbitro del InfiniteLoader rendir puntal a la FixedSizeList componente?

Sí, esto es lo que tengo actualmente:

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

¿Puedes intentar intercambiar InfiniteLoader y AutoSizer para que tengas AutoSizer como componente externo?

Eso funcionó para mí si no recuerdo mal.

Tengo el mismo problema aunque tengo el AutoSizer como componente externo

Hola @killpowa , ¿tienes un ejemplo que pueda ver?

Hola @chrisneven , aquí está el ejemplo: codesandbox

Gracias por adelantado. :)

Hola @ DevAKS-Yara,

He echado un vistazo a su ejemplo y no está pasando el ref del componente InfiniteLoader componente de su lista ( VirtualTable ), así que esa es la razón principal por la que recibe ese mensaje invalid ref .

Edité tu ejemplo e implementé una versión funcional.

La conclusión principal aquí es que cuando desea otra referencia al componente de la lista y también usa el componente InfiniteLoader , necesita escribir una función de devolución de llamada que establezca el InfiniteLoader ref y cualquier otra referencia que necesite . Vea la función setRefs en el componente VirtualTable .

Hola @ DevAKS-Yara,

He echado un vistazo a su ejemplo y no está pasando el ref del componente InfiniteLoader componente de su lista ( VirtualTable ), así que esa es la razón principal por la que recibe ese mensaje invalid ref .

Edité tu ejemplo e implementé una versión funcional.

La conclusión principal aquí es que cuando desea otra referencia al componente de la lista y también usa el componente InfiniteLoader , necesita escribir una función de devolución de llamada que establezca el InfiniteLoader ref y cualquier otra referencia que necesite . Vea la función setRefs en el componente VirtualTable .

¡Oh! Intenté pasar ref directamente desde InfiniteLoader a VirtualTable pero no salió bien. ¿Cuál es la diferencia entre usar directamente la referencia pasada y configurar a través de la función de devolución de llamada?

Por cierto, ¡gracias por la solución! 👍🏼 :)

Por cierto, ¡gracias por la solución! 👍🏼 :)

¡Eres bienvenido!

¡Oh! Intenté pasar ref directamente desde InfiniteLoader a VirtualTable pero no salió bien. ¿Cuál es la diferencia entre usar directamente la referencia pasada y configurar a través de la función de devolución de llamada?

Bueno, también podría pasar directamente la referencia, pero en este caso aparentemente necesita tener varias referencias. Al utilizar una "referencia de devolución de llamada", puede asignar varias referencias a un nodo DOM. Preferiblemente, debería ponerlo en un gancho useCallback . Esto asegura que nuestra referencia de devolución de llamada no cambie entre las re-renderizaciones.