Получите все объекты в конечной точке, используя axios, если есть вовлеченная нумерация страниц.

Question

Хорошо, у меня есть файл с данными.Это JSX внутри функции рендеринга.

<Form.Input
list = 'materials' 
type = 'text'
placeholder='Material' 
name='material_id'
id='material_id'
value={material_id} 
onChange={this.onChange}
/>
  <datalist id='materials'>
  {
    returndata.map((item, i) => <option key={i} value={item.uuid}>{item.title}</option>)
  }
  </datalist>

, и у меня есть это ComponentDidMount

   componentDidMount() {
    const token = localStorage.getItem('jwt');

    const apiBaseUrl = "http://127.0.0.1:8000/api/materials";

    const config = {
     headers: {
       'Authorization': "bearer " + token,
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     }
    }

    axios.get(apiBaseUrl, config)
     .then((response) => {
         console.log(response.data);
       this.setState({
         options: response.data
       })
      })
     .catch((error) => {
       console.log(error);
      });
   }

сейчас, эта конечная точка, которую я использую в axios, показывает только первую страницу, которая будетЧтобы получить следующий объект, я должен использовать http://127.0.0.1:8000/api/materials/?page=2 и так далее, и так далее.

стр. 1:

{
"data": [
    {
        "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a",
        "title": "Apple",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:45:36",
        "updated_at": "2017-11-24 06:45:36",
        "deleted_at": null
    },


    {
        "uuid": "2048f730-bfa0-11e7-95fb-6dceb95ba437",
        "title": "Banana",
        "viewing_time": 15,
        "description": "It's a fruit",
        "organization_id": null,
        "created_at": "2017-11-02 15:33:31",
        "updated_at": "2017-11-02 15:33:31",
        "deleted_at": null
    },


    {
        "uuid": "3b6a1020-d0a0-11e7-b6bb-d77fc76d610b",
        "title": "Strawberry",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:47:06",
        "updated_at": "2017-11-24 06:47:06",
        "deleted_at": null,
    },

стр. 2:

{
"data": [
    {
        "uuid": "05a36470-d0a0-11e7-91b4-ff3d7d9f961a",
        "title": "Orange",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:45:36",
        "updated_at": "2017-11-24 06:45:36",
        "deleted_at": null
    },


    {
        "uuid": "2048f730-bfa0-11e7-95fb-6dceb95ba437",
        "title": "Grapes",
        "viewing_time": 15,
        "description": "It's a fruit",
        "organization_id": null,
        "created_at": "2017-11-02 15:33:31",
        "updated_at": "2017-11-02 15:33:31",
        "deleted_at": null
    },


    {
        "uuid": "3b6a1020-d0a0-11e7-b6bb-d77fc76d610b",
        "title": "Kiwi",
        "viewing_time": 15,
        "description": "",
        "organization_id": null,
        "created_at": "2017-11-24 06:47:06",
        "updated_at": "2017-11-24 06:47:06",
        "deleted_at": null,
    },

например, мои варианты показывают только [Apple, Banana, Strawberry], потому что они на странице 1, но страница 2 содержит [Апельсин, виноград, киви], как я могу показать их все в моих настройках?

Answer 1

Поскольку ваши API для получения различного содержимого страницы различны, вы должны вызвать все API, чтобы получить все данные.Если вам нужно показать 3 страницы, вы должны вызвать 3 API, используя axios, вы можете сделать параллельный вызов API следующим образом:

const api1 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=1'
      }));
const api2 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=2'
      }));
const api3 = axios({
        headers,
        url : 'http://127.0.0.1:8000/api/materials/?page=3'
      }));
const [api1_resp, api2_resp_api3_resp]= await Promise.all([api1, api1, api3]);

Объедините api1_resp, api2_resp_api3_resp и получите все данные.