时间戳

首页 > 解决方案 > ReactJS：结合来自 get 请求的 2 个 JSON 响应

javascript - ReactJS：结合来自 get 请求的 2 个 JSON 响应

问题描述

所以，我有这段代码可以返回所有可以从端点检索到的数据。我的端点有分页：它每页只显示 10 个数据。所以我的第一个端点：Link + "api/materials/?page=" + page;where page = 1，返回前 10 个数据。然后我有第二页，所以 for 循环现在将Link + "api/materials/?page=" + page;在哪里运行page = 2并将返回一组不同的数据。我想要发生的是，两个端点的所有结果都将同时显示，如果我的第一个端点有 10 个数据，第二次运行端点有 6 个数据，我希望能够在我的桌子。现在会发生什么就是说，当循环开始并运行第一个端点时，它会显示第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;

标签： javascriptreactjsaxios

解决方案

那是因为您将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

推荐阅读