Как работает этот код с axios?

Question

[PlasterTom]

Тут был задан вопрос по использованию компонента.
Непонятный фрагмент кода оттуда:

loadThumbnails = () => {
    const { page, limit } = this.state;
    
    this.setState({
      isLoading: true,
      isError: false,
    }, () => {
      axios.get(
        `api/somePath?limit=${limit}&page=${page + 1}`
      ).then(response => {
        const { data: { elements, total } } = response;
      
        this.setState(prevState => ({
          elements: [
            ...prevState.elements,
            ...elements
          ],
          page: page + 1,
          isLoading: false,
          total,
        }));
      }).catch(error => {
        this.setState({
          isLoading: false,
          isError: true,
        });
      });
    });
  };

1) По какому принципу прописывать url в axios.get? Почему адрес меняется (page+1), если подразумевается, что происходит подгрузка на одну и ту же страницу приложения? Кажется, я чего-то совсем не понимаю.
2) И что это за синтаксис:
elements: [
...prevState.elements,
...elements
],

?
3) Какие материалы мне стоит почитать и в каком порядке, чтобы понять, что там происходит, уметь это повторить и модифицировать? Сейчас весь этот код - темный лес.

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

Comments

[Aves]

2) Spread в литералах массивов

Answer 1

[Антон Спирин]

Я вам это пример тогда скинул, чтобы показать приближенный к жизни кейс использования этого компонента. Все совсем не обязательно должно быть реализовано именно так.

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-rest

const 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, передача и хранение файлов и прочее. И пробуйте это на практике.