Задать вопрос
@Dasslier
FrontEnd Developer
react

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

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

Как это реализовать? Гуглил, но везде вылезает информация про React.lazy который занимается отложенной загрузкой компонентов для уменьшения бандла. Если я правильно понял, то это вообще не то.
  • Вопрос задан
  • 3767 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
0xD34F
@0xD34F Куратор тега React
Добавляете в стейт свойство, указывающее сколько элементов надо показать. Также вешаете обработчик события скролла, в котором проверяете scrollTop - если дальше скроллить некуда, увеличиваете количество отображаемых элементов. Например.
Ответ написан
4 комментария
4 комментария
hzzzzl
@hzzzzl
https://www.npmjs.com/package/react-infinite-scrol...

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

ну и в fetchData вся магия, подставляешь в массив items [уже отрисованные 100 элементов, новые 100 элементов] через setState, и всё перерендеривается и добавляются новые элементы на страницу
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
то о чем вы говорите стандартная практика. Вы должны например обращаясь к апи говорить смещение и количество элементов которые хотите загрузить. Например смещение 0 и 100 элементов. Следующий шаг смещение уже 100 и элементов 100. К первым 100 вы добавите новые таким образом получите ваши 200 элементов при скроллинге. Вы не можете найти список для отображения ? советую взять https://github.com/bvaughn/react-virtualized в нем можно реализовать данный функционал.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать клиентское приложение для GTA 5 на C#
20 апр. 2024, в 00:51
1000 руб./за проект
Верстка и логика формы выбора билетов в зале для покупки
20 апр. 2024, в 00:43
10000 руб./за проект
Разработать формирование УПД на Java
20 апр. 2024, в 00:28
20000 руб./за проект
Ещё заказы