javascript - react-admin 分页没有按预期工作

问题描述

创建了一个从自定义 rest api 中提取的简单 react-admin 应用程序。显示第一页（默认每页 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 教程返回 10 条记录。当我将页面限制设置为 5 时，它似乎工作正常（在第一次单击 Next 时前进到第 2 页），但是没有更多记录，很难完全测试它。但我的猜测是它会起作用，因为它肯定是我的代码或 API 的问题（尽管，正如我所说，API 在反应应用程序之外工作）。

这是我的 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 页。

标签： javascriptreactjsrestreact-admin

javascript - react-admin 分页没有按预期工作

问题描述

解决方案

推荐阅读