MUI React Table Pagination分页异常：新页内容追加而非切换

1. 修复分页数据截取的错误 #

你的代码里slice的结束位置多减了1，导致每页数据少一条，且分页切换时数据范围计算错误，这是内容错乱的核心原因之一。

正确的slice用法是slice(startIndex, endIndex)，其中endIndex是不包含在截取结果里的，所以分页截取应该写成：

this.state.datas.slice(
  this.state.page * this.state.rowsPerPage,
  this.state.page * this.state.rowsPerPage + this.state.rowsPerPage
)

原来的-1会让每页少拿一条数据，而且当切换页码时，新旧数据的截取范围可能重叠，造成“追加”的视觉错误。

2. 修复行元素的Key问题 #

你现在用row.data[0]作为StyledTableRow的key，如果不同页的行存在相同的data[0]值，React的diff算法会误以为这是同一个组件，不会重新渲染，而是复用旧组件并更新内容，这会直接导致页面内容错乱。

看你的代码里有row.dataIx字段，这应该是每行的唯一索引，把它作为key才是正确的：

<StyledTableRow key={row.dataIx} sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
  onClick={() => this.setState({selectedRow: row.dataIx}) }>

3. 验证emptyRows的计算逻辑（可选） #

如果修复上面两点后还有问题，检查emptyRows的计算是否正确。emptyRows应该是Math.max(0, this.state.rowsPerPage - (this.state.rows - this.state.page * this.state.rowsPerPage))，确保空行的高度计算不会影响正常行的渲染。

把这两处修改后，分页切换时就能正确刷新内容，不会出现追加或错乱的问题了。

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