Я вам это пример тогда скинул, чтобы показать приближенный к жизни кейс использования этого компонента. Все совсем не обязательно должно быть реализовано именно так.
1. Смотрите у вас компонент реализует бесконечную подгрузку информации с сервера. Но как вы собрались реализовывать взаимодействие клиента и сервера? Как серверу узнать сколько данных вы получили и какие отдавать дальше? Простейший и проверенный временем вариант
пагинация. Надо использовать пагинатор на стороне сервера.
Допустим на сервере 500 изображений. Как запросить первые 20?
GET 'api/images?limit=20&page=1'
Сервер должен вернуть что-то вроде:
{
data: [...],
quantity: 500,
}
Теперь вы знаете, что изображений всего 500.
Запрос на следующие 20 изображений будет:
GET 'api/images?limit=20&page=2'
Как только вы загрузите 25-ую страницу, условие в
render:
const hasMore = page * limit < total;
вернет
false, так как:
25 * 20 < 500 // false
И ваш компонент перестанет обращаться к серверу и показывать прелоадер при прокрутке в конец списка, так как он полностью загружен.
Как-то так. Клиент видит бесконечный список, а по факту сервер возвращает данные постранично.
2.
spread operator
https://developer.mozilla.org/ru/docs/Web/JavaScri...
es6-features.org/#SpreadOperator
jsraccoon.ru/es6-spread-restconst arr1 = ['a'];
const arr2 = ['b'];
const arr3 = [...arr1, ...arr2];
const arr4 = [...arr1, 1, ...arr2, 'c'];
console.log(arr3);
// => ['a', 'b'];
console.log(arr4);
// => ['a', 1, 'b', 'c'];
const obj1 = { a: 'a', b: 'old b' };
const obj2 = { b: 'new b', c: 'c' };
const obj3 = { ...obj1, ...obj2 };
const obj4 = { ...obj2, ...obj1 };
const obj5 = { ...obj1, ...obj2, d: 'd' };
console.log(obj3);
// => { a: 'a', b: 'new b', c: 'c' };
console.log(obj4);
// => { a: 'a', b: 'old b', c: 'c' };
console.log(obj5);
// => { a: 'a', b: 'new b', c: 'c', d: 'd' };
3. Хорошо изучить
JavaScript, можно пройти уроки на
learn.javascript.ru. Изучайте пути решения типовых задач веба: валидация, авторизация, пагинация, CRUD, REST, передача и хранение файлов и прочее. И пробуйте это на практике.
