ReactJS: объединить 2 JSON-ответа от запроса get

Question

Итак, у меня есть этот код, который возвращает все данные, которые можно извлечь из конечной точки.Моя конечная точка имеет нумерацию страниц: она отображает только 10 данных на страницу.поэтому моя первая конечная точка: Link + "api/materials/?page=" + page;, где page = 1, возвращает первые 10 данных.затем у меня есть вторая страница, поэтому цикл for теперь будет запускаться Link + "api/materials/?page=" + page;, где page = 2 и будет возвращать другой набор данных. То, что я хочу, чтобы произошло , это то, что все результаты с обеих конечных точек будут отображаться одновременно, если у меня есть 10 данных в моей первой конечной точке и 6 данных в моем втором прогоне конечной точки, я хочу иметь возможностьчтобы увидеть 16 данных в моей таблице. Что происходит сейчас в том, что, когда цикл запускается и запускает первую конечную точку, он отображает все данные со страницы 1, а затем, когда он повторяется снова и запускает страницу 2, данные со страницы 1 будут замененысо страницей 2. Я хочу объединить данные со страниц 1 и 2.

, пожалуйста, помогите мне.

import React, {Component} from 'react';
import { Table } from 'semantic-ui-react'
import Link from './Link';
import axios from 'axios';
import _ from 'lodash';

class Material extends Component {
    constructor(props){
      super(props);
      this.state={
        materials: []
    }
   }

   componentDidMount() {
    const token = localStorage.getItem('jwt');
    const total = localStorage.getItem('totalpage');
    var page;
    for (page = 1; page <= total ; page++) {
        const apiBaseUrl = Link + "api/materials/?page=" + page;

        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({
             materials: response.data
           })
          })
    }

   }

    render() {
        const { materials } = this.state;

        let returndata = _.isEmpty(materials) ? [] : materials.data

        return (  
            <div className="ui container"> 
            <br />
            <br />
                <Table fixed>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell>UUID</Table.HeaderCell>
                            <Table.HeaderCell>Title</Table.HeaderCell>
                            <Table.HeaderCell>Description</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                    {returndata.map((item, i) => {
                        return (
                        <Table.Row key = {i}>
                            <Table.Cell>{item.uuid}</Table.Cell>
                            <Table.Cell>{item.title}</Table.Cell>
                            <Table.Cell>{item.description}</Table.Cell>
                        </Table.Row>
                        )
                    })}
                    </Table.Body>
                </Table>
            </div>
      );
    }
  }
  export default Material;

Answer 1

Замените ваши .then из axios на эти

.then((response) => {
        let tempState = [...this.state.materials];
        tempState.push(response.data)
        this.setState({
         materials: tempState
       })

Это скопирует состояние в другую переменную и поместит новые данные в новую переменную (tempState) и заменит состояние наtempState, который теперь содержит предыдущие данные о состоянии и новые данные

Answer 2

Это потому, что вы заменяете объект materials в состоянии вновь возвращенными данными.

Вызываете некоторую функцию, которая обновит ваше состояние.

axios.get(apiBaseUrl, config)
.then((response) => {
    console.log(response.data);
    this.updateMaterials(response.data);
 })

Теперь обновите свое состояние в этой функции как Сначала получите старый список, а затем объедините новый список в нем, а затем сохраните его в своем состоянии.

updateMaterials = (data) => {
    let updatedList = this.state.materials.slice();
    updatedList = updatedList.concat(data);
    this.setState({materials: updatedList});
}

Также удалите data из материалов.

измените

let returndata = _.isEmpty(materials) ? [] : materials.data

на

let returndata = _.isEmpty(materials) ? [] : materials

Answer 3

Глядя на ваш componentDidMount метод.Вы можете расширить текущее свойство объекта состояния вместо его замены следующим образом:

componentDidMount() {
  const token = localStorage.getItem('jwt');
  const total = localStorage.getItem('totalpage');
  var page;
  for (page = 1; page <= total ; page++) {
    const apiBaseUrl = Link + "api/materials/?page=" + page;

    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((prevState) => ({
          materials: prevState.materials.concat(response.data)
        }));
      })
  }
}