mysql - 即使在添加 X-Total-Count 后，分页和排序也无法按预期在 react-admin 中工作

Question

这是我第一次使用 react-admin。我已经完成了文档中的教程设置。当我为我的 API 实现相同的设置时，问题就开始了。

我有一个使用 expressJS 设置的 Web API 路由，用于从 mySQL 数据库中获取数据。较早的错误是为了分页在 React-Admin 上工作而在 HTTP 响应 header 中包含 X-Total-Count。

我在 HTTP 响应 header 中添加了 X-Total-Count，并且数据已成功从 Web API 获取到 react-admin 界面。但是，分页仍然没有按预期工作。

下面的片段可能会有帮助。

在 App.js 中

  <Admin dataProvider={jsonServerProvider("/api/fetch/")}>
    <Resource
      name="temp"
      list={UserList}
      edit={UserEdit}
      create={CreateUser}
    />
  </Admin>

fetch.js 中的 Web Express API

route.get('/temp', (req, res) => {
  sql.query(`SELECT * FROM temp`, (err, result) => {
    if (err) {
        return res.status(400).send(`Invalid Request: ${err}`)
    }

    res.setHeader('X-Total-Count', result.length)

    return res.status(200).send(result)
  })
})

在 server.js 中

app.use(cors());   // using cors

react-admin 在一个表中显示从 Web API 获取的所有数据，没有分页和排序功能，这不是我想要的。如您所见，分页设置为每个表显示 10 条记录，并在分页时拆分剩余记录，而在我的情况下，所有数据都显示在单个表上，分页菜单无效。

同样，基于列的表格排序也不是很好

Answer 1

当你有分页时，或者默认在<List> React-Admin 通过向后端发送查询字符串以将响应限制为一定数量来批量获取记录。然后将响应呈现在前端。据我所知，您的后端独立于请求查询字符串返回表中的所有记录。如果您说将响应限制为 10 条记录，或者您不这样做，它总是会返回表中的所有记录，因此它会在前端显示所有记录。

您还可以看到您没有排序，因为在问题图像中您大学名称按升序排序，但记录显示按 ID 排序。