如何在API加载时禁用MUI X Data Grid的下一页按钮

要实现API加载过程中禁用「前往下一页」按钮，直接启用你代码中已注释的disableNextPage属性即可，将其值绑定到加载状态isLoading：

<DataGrid
  autoHeight
  getRowHeight={getRowHeight}
  rows={rows}
  columns={columns}
  page={page - 1}
  rowCount={total}
  rowsPerPageOptions={rowsPerPage}
  pagination
  paginationMode='server'
  pageSize={pageSize}
  getRowClassName={(params) => getRowClassName(params)}
  onPageChange={(newPage) => handelPageChange(newPage)}
  loading={isLoading}
  disableNextPage={isLoading} // 启用这行代码
  onPageSizeChange={(newPageSize) =>
    setAssetList((prveState) => ({
      ...prveState,
      pageSize: newPageSize,
    }))
  }
/>

补充说明 #

• disableNextPage是MUI X Data Grid专门用于控制下一页按钮禁用状态的属性，当isLoading为true时，按钮会自动变为禁用状态，阻止用户在加载过程中触发分页请求。
• 如果需要在加载时禁用所有分页控件（包括上一页、页码输入框等），可以改用disablePagination={isLoading}，但这会隐藏整个分页栏，可根据实际需求选择。

内容的提问来源于stack exchange，提问作者Sameer Kulkarni