How does this code with axios?

Then the question was asked on the use of the component.
Strange snippet 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) On what basis to prescribe the url to axios.get? Why does the address change (page+1), if it's what happens on uploading the same app page? I think I something do not understand.
2) what is this syntax:
elements: [
...prevState.elements
...elements
],

?
3) What materials should I read and in what order to understand what is happening there, to be able to repeat and modify? Now all of this code - the dark forest.

Thanks in advance.
June 8th 19 at 16:35
1 answer
June 8th 19 at 16:37
Solution
I then threw an example to show the approach to life case use this component. It is not necessarily be implemented that way.

1. See you have a component implements an endless uploading of information from the server. But how are you going to implement interaction between client and server? How the server know how much data you got and what to give next? The simplest and time-tested option pagination. It is necessary to use a pager on the server side.
Let's say on the server 500 images. How to request the first 20?
GET 'api/images?limit=20&page=1'
The server should return something like:
{
 data: [...],
 quantity: 500,
}

Now you know that images are only 500.
Request the next 20 images will be:
GET 'api/images?limit=20&page=2'

Once you download 25th page, the condition to render:
const hasMore = page * limit < total;
will return false, because:
25 * 20 < 500 // false
And your component will cease to apply to the server and show a preloader when you scroll to the end of the list, as it is fully loaded.
Something like that. The client sees an endless list, but in fact the server returns data in pages.

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 = [array1..., 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. It is good to learn JavaScript, you can pass the lessons on learn.javascript.ru. Learn solutions to common tasks of web validation, authorization, pagination, CRUD, REST, transfer and storage of files etc. And try it in practice.

Find more questions by tags React