Суть задачи:
Приходит массив, в котором может быть, например 1000 строк. Мне нужно отобразить 100 строк, а затем подгружать еще по 100 строк, если пользователь скроллит страницу, и так до тех пор, пока весь массив не будет отображен.
Как это реализовать? Гуглил, но везде вылезает информация про React.lazy который занимается отложенной загрузкой компонентов для уменьшения бандла. Если я правильно понял, то это вообще не то.
Добавляете в стейт свойство, указывающее сколько элементов надо показать. Также вешаете обработчик события скролла, в котором проверяете scrollTop - если дальше скроллить некуда, увеличиваете количество отображаемых элементов. Например.
0xD34F еще такой вопрос. Сам проект с Redux, и нужно в нем держать весь state по идее, но нужно ли предложенный вами вариант держать в общем state? Ведь количество элементов массива не будет изменяться, а только лишь отображение.
Как правильнее поступить? Реализовать это в компоненте классе со своим state, или вынести это в общий state?
Павел Диденко, это вам виднее. Например, если пользователь открывает этот список повторно - увидит ли он все ранее просмотренные записи сразу, или опять должен скроллить?
когда юзер долистает окно до этого компонента InfiniteScroll, то вызовется
next={fetchData}
ну и в fetchData вся магия, подставляешь в массив items [уже отрисованные 100 элементов, новые 100 элементов] через setState, и всё перерендеривается и добавляются новые элементы на страницу
то о чем вы говорите стандартная практика. Вы должны например обращаясь к апи говорить смещение и количество элементов которые хотите загрузить. Например смещение 0 и 100 элементов. Следующий шаг смещение уже 100 и элементов 100. К первым 100 вы добавите новые таким образом получите ваши 200 элементов при скроллинге. Вы не можете найти список для отображения ? советую взять https://github.com/bvaughn/react-virtualized в нем можно реализовать данный функционал.
