ReactJs - MaterialTable 分页，每页行不起作用答案

【问题标题】：ReactJs - MaterialTable pagination, row per page not workingReactJs - MaterialTable 分页，每页行不起作用
【发布时间】：2021-07-10 01:53:57
【问题描述】：

我目前正在使用 Material-table 。它通常显示data，但是，分页和每页行下拉菜单不起作用。单击下一步按钮和选定的行数时没有任何反应。

见以下代码：

import MaterialTable from 'material-table'

const tableIcons = {
 /*table icons*/
}

function Test(){
  const [data, setData] = useState([]);
  
  const getDatas = async() => {
    await axios.get('/API')
    .then(response => {
      setData(response.data)
    }
  }

const columns = [
  {.....} //columns
]

return(
  <div>
    <MaterialTable
      icons = {tableIcons}
      columns = {columns}
      data = {data}
      title = 'List of data'
      actions = {[{
        //add button properties
      }]}
    >
    </MaterialTable>
  </div>
)

}
export default Test;

我在console onload 并单击分页按钮时收到以下错误。

加载中：

点击下一个按钮

请帮我解决这个问题。提前谢谢你。

【问题讨论】：

标签： javascript reactjs material-ui material-table

【解决方案1】：

首先要记住原来的project已经停产了，新的方向可以在这个repository中找到（它是原来的一个fork）。会有很多重构和重大更改，因此您可能需要先检查一下。

现在，关于你的问题，由于您正在处理远程数据，您可以查看官方example 了解如何处理此类数据。

如果您的要求不允许您这样做，您将需要自己完成所有处理。这意味着您应该提供自己的 Pagination 组件实现，您可以在其中定义自己的 onChangePage 和其他回调的行为。

自定义看起来像：

Pagination: (properties: any) => {
    return (
        <TablePagination
            {...properties}
            count={currentPage.total}
            onChangePage={(event: any, page: number) => {
                onChangePage(page);
            }}
            page={currentPage.startIndex / pageSize}
        />
    );
}

total、startIndex 等将由您使用的 API 以及您在表中显示的实际数据提供。这些组件覆盖应在材料表的components 属性下提供。

【讨论】：