react-admin 分页没有按预期工作 [英] react-admin pagination not working as expected

问题描述

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

Created a simple react-admin application that pulls from a custom rest api. First page is displayed (default 10 per page. Click the Next button and nothing happens (still sends page=1 to the api). Click a second time and the page advances to page 2 (page=2), as expected. Click the third time and goes back to page 1 (page=1).

然后，如果您第四次单击，它会转到第 2 页，然后再次单击，转到第 3 页，然后再次单击，返回到第 1 页.它继续这种模式，每一轮，在前一页返回页面.

Then, if you click a fourth time, it goes page 2, then click again, goes to page 3, then click again, goes back to page 1. It continues with this pattern, each round, getting one page further before going back to page.

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

I'm able to get the correct results when calling the custom API outside of the react-admin app. I created a custom dataProvider to communicate with the API and maybe there's a problem with the getList function, but I can definitely see the page number passed into this function and it lines up with the odd results (page 1, then 1, 2, 1, then 1, 2, 3, 1, etc. The custom API expects the following query string for pagination: ?limit=10&page=1&orderBy=id&orderDir=ASC

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

The original react-admin tutorial returns 10 records. When I set the page limit to 5, it does seem to work OK (advances to page 2 on the first click of Next), but without more records, it's hard to test it completely. But my guess is it would work, since it is most certainly a problem with my code or the API (although, as I said, the API works outside the react app).

这是我的 getList 函数:

Here's my getList function:

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

这是问题的屏幕截图:

看起来正在发送正确的查询字符串，但是在第一次点击 Next page(page=2)之后，page=1 会立即自动再次发送，返回到第一页.随后的 Next 单击似乎也是这种情况.感谢您帮助新手.但我就是不明白为什么要返回第 1 页的额外调用.

It looks like the correct query string is being sent but immediately after the first Next page click (page=2), page=1 is automatically sent again, returning to page one. This seems to be the case with subsequent Next clicks, as well. Thanks for helping out a newbie. But I just can't figure out why extra calls are being made returning to page 1.

推荐答案

已在 react-admin 3.4.3 中修复.

Fixed in react-admin 3.4.3.

我使用 npm update 进行更新，分页工作正常.

I updated using npm update and pagination works correctly.

这篇关于react-admin 分页没有按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！