即使添加X-Total-Count后,分页和排序仍无法按预期在react-admin中运行

时间:2019-05-08 16:12:31

标签: mysql rest express react-admin json-server

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

我已经为expressJS设置了一个Web API路由,以便从mySQL数据库中获取数据。早期的错误是在HTTP响应标头中包含X-Total-Count以便分页在React-Admin上工作。

我已经在HTTP响应标头中添加了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条记录,并在分页时拆分其余记录,而在我的情况下,所有数据都显示在单个表上,但分页菜单无效。

类似地,基于列对表进行的排序也不起作用

click to see output screenshot

1 个答案:

答案 0 :(得分:0)

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

您也可以看到您没有排序,因为在问题图像中,大学名称按升序排序,但是记录按id排序。