Как подгружать данные ленивой загрузкой на React?

Question

[Павел Диденко]

Суть задачи:
Приходит массив, в котором может быть, например 1000 строк. Мне нужно отобразить 100 строк, а затем подгружать еще по 100 строк, если пользователь скроллит страницу, и так до тех пор, пока весь массив не будет отображен.

Как это реализовать? Гуглил, но везде вылезает информация про React.lazy который занимается отложенной загрузкой компонентов для уменьшения бандла. Если я правильно понял, то это вообще не то.

Answer 1

[0xD34F]

Добавляете в стейт свойство, указывающее сколько элементов надо показать. Также вешаете обработчик события скролла, в котором проверяете scrollTop - если дальше скроллить некуда, увеличиваете количество отображаемых элементов. Например.

Comments

[Павел Диденко]

Спасибо!

[Павел Диденко]

0xD34F еще такой вопрос. Сам проект с Redux, и нужно в нем держать весь state по идее, но нужно ли предложенный вами вариант держать в общем state? Ведь количество элементов массива не будет изменяться, а только лишь отображение.

Как правильнее поступить? Реализовать это в компоненте классе со своим state, или вынести это в общий state?

[0xD34F]

Павел Диденко, это вам виднее. Например, если пользователь открывает этот список повторно - увидит ли он все ранее просмотренные записи сразу, или опять должен скроллить?

[Павел Диденко]

0xD34F, свежая инфа пришла, при получении списка будет происходит запрос к бэку, значит буду хранить в Redux
Спасибо еще раз

Answer 2

[hzzzzl]

https://www.npmjs.com/package/react-infinite-scrol...

когда юзер долистает окно до этого компонента InfiniteScroll, то вызовется
next={fetchData}

ну и в fetchData вся магия, подставляешь в массив items [уже отрисованные 100 элементов, новые 100 элементов] через setState, и всё перерендеривается и добавляются новые элементы на страницу

Answer 3

[Роман Александрович]

то о чем вы говорите стандартная практика. Вы должны например обращаясь к апи говорить смещение и количество элементов которые хотите загрузить. Например смещение 0 и 100 элементов. Следующий шаг смещение уже 100 и элементов 100. К первым 100 вы добавите новые таким образом получите ваши 200 элементов при скроллинге. Вы не можете найти список для отображения ? советую взять https://github.com/bvaughn/react-virtualized в нем можно реализовать данный функционал.