时间戳

首页 > 解决方案 > 以编程方式刷新远程数据时处理表分页

reactjs - 以编程方式刷新远程数据时处理表分页

问题描述

我正在尝试将相同的场景（https://github.com/mbrn/material-table/issues/383）与我自己的 API 端点一起使用，在我的响应结果中我没有 totalCount 和 page 值。没有它们，我的表格分页说NaN-NaN of undefined

我可以通过 result.length 处理 totalCount，处理完这个后，我可以看到分页为NaN-NaN of 38（38 是数组项的计数），但我无法继续到下一页。这是我的代码：

data={query =>
  new Promise((resolve, reject) => {
    fetch('https://xxxxxxxxxxxxxxxxxx/dev/getcustomerinstructors', {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json',
            'Authorization': this.state.id_token
        },
        body: JSON.stringify({
            "refresh_token": this.state.refresh_token,
            "customer_id": this.state.customer_id,
        })
    })
      .then(response => response.json())
      .then(result => {
        console.log(result); //array of objects
        resolve({
          data: result,
          // page: 0, **//how to address this** 
          totalCount: result.length,
        })
      });
  })
}

任何帮助将不胜感激。谢谢

标签： reactjsmaterial-table

解决方案

回答我自己的问题：

const page = (query.page + 1);page: page - 1并在响应后更新页面值就可以了。

data={query =>
  new Promise((resolve, reject) => {
    let url = 'https://xxxxxxxxxxxxxxxxxxxxxx/getcustomerinstructors';
    fetch(url, {
        method: 'post',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json',
            'Authorization': this.state.id_token
        },
        body: JSON.stringify({
            "refresh_token": this.state.refresh_token,
            "customer_id": this.state.customer_id,
            "role": this.state.role
        })
    })
    .then(response => response.json())
    .then(result => {
      var res = result.slice(query.page * query.pageSize, (query.page * query.pageSize) + query.pageSize);
      resolve({
        data: res,
        page: query.page,
        totalCount: result.length,
      })
    })
  })
}

推荐阅读