Question

因此，我有这段代码可以返回可以从端点检索的所有数据。我的端点具有分页：每页仅显示10个数据。因此，我的第一个端点：Link + "api/materials/?page=" + page;，其中page = 1返回前10个数据。然后我有第二页，因此for循环现在将在Link + "api/materials/?page=" + page;的{{1}}处运行，并将返回不同的数据集。 我想发生的事情是，如果我在第一个端点中有10个数据，在我的第二个端点中有6个数据，则两个端点的所有结果将同时显示。能够查看我表中的16个数据。 现在发生的事情是，当循环开始并运行第一个端点时，它将显示第1页中的所有数据，然后当再次循环并运行第2页时，第1页中的数据将为替换为第2页。我想合并第1页和第2页的数据。

请帮助我。

page = 2

Answer 1

查看您的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)
        }));
      })
  }
}

Answer 2

以此替换.then中的axios

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

这会将状态复制到另一个变量，并将新数据推送到新变量（tempState）中，并用tempState替换状态，该状态现在包含以前的状态数据和新数据

Answer 3

那是因为您要用新返回的数据替换状态中的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

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

3 个答案: