How does this code work with axios?

Question

React

There was a question about using the component.
An obscure piece of code from there:

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) What is the principle to prescribe url in axios.get? Why does the address change (page + 1) if it is assumed that the loading is on the same page of the application? It seems that I do not understand something at all.
2) And what is this syntax:
elements: [
...prevState.elements,
...elements
],
?
3) What materials should I read and in what order in order to understand what is happening there, to be able to repeat and modify it? Now all this code is a dark forest.
Thanks in advance.

Answer 1

I then threw off this example to you to show a case of using this component that is close to life. Everything doesn't have to be done that way.
1. Look, your component implements an endless loading of information from the server. But how are you going to implement the interaction between the client and the server? How can the server find out how much data you received and which ones to give next? The simplest and time-tested pagination option . You need to use a paginator on the server side.
Let's say there are 500 images on the server. How to request the first 20? The server should return something like:

{
  data: [...],
  quantity: 500,
}

Now you know that there are 500 images in total. The
request for the next 20 images will be: As soon as you load the 25th page, the condition in render : will return false because: And your component will stop communicating with the server and showing the preloader when scrolling to the end of the list , as it is fully loaded. Something like this. The client sees an infinite list, but in fact the server returns the data page by page. 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. Learn JavaScript well , you can take lessons on learn.javascript.ru . Learn how to solve typical web tasks: validation, authorization, pagination, CRUD, REST, file transfer and storage, and more. And try it in practice.