<p>response-window-infinite-loader: недопустимая ссылка на список</p>

Вы передаете ссылку из опоры InfiniteLoader render компоненту 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 , вот пример - codeandbox

Заранее спасибо. :)

Привет @ ДевАКС-Яра!

Я рассмотрел ваш пример, и вы не передаете ref из компонента InfiniteLoader компоненту списка ( VirtualTable ), поэтому это основная причина, по которой вы получить это сообщение invalid ref .

Я отредактировал ваш пример и реализовал рабочую версию

Главный вывод здесь заключается в том, что если вам нужна еще одна ссылка на компонент списка, а также используется компонент InfiniteLoader , вам нужно написать функцию обратного вызова, которая устанавливает InfiniteLoader ref и любые другие ссылки, которые вам нужны. . См setRefs функции в VirtualTable компонента.

Привет @ ДевАКС-Яра!

Я рассмотрел ваш пример, и вы не передаете ref из компонента InfiniteLoader компоненту списка ( VirtualTable ), поэтому это основная причина, по которой вы получить это сообщение invalid ref .

Я отредактировал ваш пример и реализовал рабочую версию

Главный вывод здесь заключается в том, что если вам нужна еще одна ссылка на компонент списка, а также используется компонент InfiniteLoader , вам нужно написать функцию обратного вызова, которая устанавливает InfiniteLoader ref и любые другие ссылки, которые вам нужны. . См setRefs функции в VirtualTable компонента.

Ой! Я попытался передать ref напрямую из InfiniteLoader в VirtualTable но это не помогло. В чем разница между прямым использованием переданной ссылки и настройкой с помощью функции обратного вызова?

Кстати, спасибо за решение! 👍🏼 :)

Кстати, спасибо за решение! 👍🏼 :)

Пожалуйста!

Ой! Я попытался передать ref напрямую из InfiniteLoader в VirtualTable но это не помогло. В чем разница между прямым использованием переданной ссылки и настройкой с помощью функции обратного вызова?

Ну, вы также можете напрямую передать ссылку, но в этом случае вам, очевидно, понадобится несколько ссылок. Используя «ссылку обратного вызова», вы можете назначить несколько ссылок на узел DOM. Желательно поместить его в крючок useCallback . Это гарантирует, что наша ссылка обратного вызова не изменится между повторными рендерингами.