反应管理分页没有按预期工作

Question

创建了一个简单的 react-admin 应用程序，它从自定义 rest 中提取 api。显示第一页（默认每页 10 页。单击下一步按钮，没有任何反应（仍将 page=1 发送到 api）。第二次单击，页面前进到第 2 页（page=2），如下所示预期。单击第三次并返回到第 1 页（page=1）。

然后，如果你点击第四次，它会转到第 2 页，然后再次单击，转到第 3 页，然后再次单击，返回到第 1 页。继续这种模式，每一轮，得到一页在返回页面之前进一步。

在 react-admin 应用程序之外调用自定义 API 时，我能够得到正确的结果。我创建了一个自定义 dataProvider 来与 API 通信，也许 getList 函数有问题，但我绝对可以看到传递给该函数的页码，它与奇怪的结果（第 1 页，然后是第 1 页）一致, 2, 1, 然后是 1, 2, 3, 1, 等等。自定义 API 需要以下查询字符串进行分页： ?limit=10&page=1&orderBy=id&orderDir=ASC

react-admin原创教程returns10条记录。当我将页面限制设置为 5 时，它似乎工作正常（第一次单击下一步时前进到第 2 页），但没有更多记录，很难对其进行全面测试。但我的猜测是它会起作用，因为这肯定是我的代码或 API 的问题（尽管，正如我所说，API 在 React 应用程序之外工作）。

这是我的 getList 函数：

const httpClient = (url, options = {}) => {
  if (!options.headers) {
    options.headers = new Headers({ Accept: 'application/json' });
  }
  const tokens = localStorage.getItem('tokens');
  const objToken = JSON.parse(tokens);

  options.user = {
    authenticated: true,
    token: `Bearer ${objToken.accessToken}`
  };
  return fetchUtils.fetchJson(url, options);
};

export default {
  getList: (resource, params) => {
    const { page, perPage } = params.pagination;
    const { field, order } = params.sort;
    const { q } = params.filter;

    // Pagination and sort
    let query = `limit=${perPage}&page=${page}&orderBy=${field}&orderDir=${order}`;
    // Filter?
    let useResource = '';
    let useFilter = '';

    if (q == null) {
      // No filter: Use <resource>/ url
      useResource = resource;
    } else {
      // Filter: Use append url with /find
      useResource = `${resource}/find`;
      useFilter = q;
      console.log('useFilter: ', useFilter)
      query += `&searchText=${useFilter}`;
    }

    const url = `${apiUrl}/${useResource}?${query}`;
    return httpClient(url)
      .then(({ json }) => ({
        data: json.results,
        total: json.totalRows,
      }));
  }, ...

这是问题的屏幕截图：

编辑：看起来正在发送正确的查询字符串，但在第一次单击下一页（page=2）后，page=1 会立即再次自动发送，返回到第一页。随后的下一步点击似乎也是如此。感谢您帮助新手。但我就是不明白为什么要进行额外的调用以返回第 1 页。

Answer 1

已在 react-admin 3.4.3 中修复。

我使用 npm update 进行了更新，并且分页工作正常。

Answer 2

我的行为与反应完全一致4.x.x

我期待的是：

单击下一页时转到下一页，react-admin 3.19 这就是我的应用程序的工作方式

发生了什么：

当您点击下一页时，分页重置为 1！另外，它没有考虑我定义的分页。

在 chrome 默认每页为 5，即使我将其设置为 10。

chrome_pagination_issue

在 firefox 上默认每页=10，但我有同样的问题

firefox_pagination_issue

其他信息：

getList: (resource, params) => {
        const { page, perPage } = params.pagination;
        const { field, order } = params.sort;
        console.log(params);
        const query = {
            ...fetchUtils.flattenObject(params.filter),
            _sort: field,
            _order: order,
            _start: (page - 1) * perPage,
            _end: page * perPage,
            _resource:resource
        };
        const url = `${apiUrl}/${resource}?${stringify(query)}`;

        return httpClient(url).then(({ headers, json }) => {
            
            if (!json.hasOwnProperty('totalElements')) {
                throw new Error(
                  "The numberOfElements property must be must be present in the Json response"
                );
            }
            return {
                data: json.content,
                total: parseInt(json.totalElements,10)
            };
        });
    }

#4658

环境

React-admin 版本: 4.0.1 , 4.0.2 反应 version:18 禁用严格模式浏览器：chrome、火狐我的后端是 spring boot rest api

反应管理分页没有按预期工作

react-admin pagination not working as expected

javascript

rest

reactjs

react-admin