Javascript ReactJS：组合来自get请求的2个JSON响应

因此，我有一段代码，它返回可以从端点检索的所有数据。我的端点有分页：它每页只显示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;

import React，{Component}来自'React'；
从“语义ui反应”导入{Table}
从“./Link”导入链接；
从“axios”导入axios；
从“lodash”进口；
类材质扩展组件{
建造师（道具）{
超级（道具）；
这个州={
材料：[]
}
}
componentDidMount（）{
const-token=localStorage.getItem（'jwt'）；
const total=localStorage.getItem（'totalpage'）；
var-page；
用于（第1页；第{
console.log（response.data）；
这是我的国家({
材料：答复.数据
})
})
}
}
render（）{
const{materials}=this.state；
让returndata=u0.isEmpty（物料）？[]：materials.data
报税表（




UUID
标题
描述
{returndata.map（（项目，i）=>{
返回(
{item.uuid}
{item.title}
{item.description}
)
})}
);
}
}
导出默认物料；
查看您的
组件didmount
方法。您可以扩展当前状态对象属性，而不是像这样替换它：

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)
        }));
      })
  }
}

componentDidMount（）{
const-token=localStorage.getItem（'jwt'）；
const total=localStorage.getItem（'totalpage'）；
var-page；
用于（第1页；第{
console.log（response.data）；
this.setState（（prevState）=>({
材料：prevState.materials.concat（响应.数据）
}));
})
}
}
替换您的
。然后用此

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

这会将状态复制到另一个变量，并将新数据推送到新变量（
tempState
）中，并将状态替换为
tempState
，它现在包含以前的状态数据和新数据
，这是因为您正在用新返回的数据替换状态中的
materials
对象

调用一些函数来更新您的状态

现在将该函数中的状态更新为
首先检索旧列表，然后在其中合并新列表，然后将其存储到您的状态

同时从材料中删除
数据

改变

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

到

我还强烈建议在这里分离您的顾虑，让父组件获取数据并将其传递给子组件，该子组件负责通过道具呈现数据。以这种方式使用状态是众所周知的反模式。是否确实要加载所有页面，无论有多少页？分页或无限滚动用户体验可能值得考虑。千万不要让updatedList=this.state.materials
。使用
扩展运算符
或
对象。分配
或其他内容。始终将状态视为不可变的。它说
TypeError:Cannot read property'map'of undefined 1
：（更新，再次检查）它只在表中呈现了两个空白行，没有数据。：（控制台记录您的资料以检查数据是否传入。现在它无法呈现，因为它说
TypeError:Cannot read property'map'of undefined
：（@Siraj是的，我在
let returndata=..isEmpty（materials）？[]：materials.data
将
materials.data
更改为just
materials
现在它只呈现了表中的两个空白行：（如果页面的顺序出现问题，数组的条目可能会排序错误。它是异步的，因此可以在第1页之前获得第2页。可能没关系；OP没有指定。我没有发现任何错误，但表中也没有呈现任何内容。@eibersji认为它是一个对象。刚刚更新到数组。现在应该可以工作了：）@eibersji只需执行
materials:[…prevState.materials，response.data]
这会使材料无序。@WillCain是的，它也不会处理重复的材料，但这些注意事项超出了问题的范围
updateMaterials = (data) => {
    let updatedList = this.state.materials.slice();
    updatedList = updatedList.concat(data);
    this.setState({materials: updatedList});
}

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

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