使用Redux与Material UI实现表格分页时遇到问题

Hey there! Let's tackle that pagination issue you're having with your table. Looking at your code snippet, you're on the right track using slice() to paginate your logs data, but let's walk through common pitfalls and fixes to get it working smoothly:

1. Make sure your pagination state is properly managed #

First, double-check that page and rowsPerPage are stored in your component's state (whether using class components or hooks) and updated correctly when the user interacts with pagination controls. For example, in a class component:

class LogTable extends React.Component {
  state = {
    page: 0,
    rowsPerPage: 5 // Default rows per page
  };

  handlePageChange = (event, newPage) => {
    this.setState({ page: newPage });
  };

  handleRowsPerPageChange = (event) => {
    this.setState({
      rowsPerPage: parseInt(event.target.value, 10),
      page: 0 // Reset to first page when changing rows per page
    });
  };

  // ... rest of your component code
}

2. Verify your slice logic & handle edge cases #

Your slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) logic is correct for 0-indexed pagination, but make sure to handle empty or loading data to avoid errors:

<TableBody>
  {/* Check if logs exist first to prevent slice on undefined */}
  {this.props.logs ? (
    this.props.logs.slice(
      this.state.page * this.state.rowsPerPage,
      this.state.page * this.state.rowsPerPage + this.state.rowsPerPage
    ).map((el) => (
      <TableRow key={el.id}> {/* Use a unique ID instead of index for better React performance */}
        <TableCell>{el.username}</TableCell>
        <TableCell>{el.logLevel}</TableCell>
        <TableCell>{el.date}</TableCell>
        <TableCell>{el.message}</TableCell>
        <TableCell>{el.details}</TableCell>
      </TableRow>
    ))
  ) : (
    <TableRow>
      <TableCell colSpan={5}>Loading logs...</TableCell>
    </TableRow>
  )}
</TableBody>

3. Link pagination controls to your state #

If you're using a component library like Material-UI's TablePagination, make sure to pass your state values and handlers to it so user actions update the table:

<TablePagination
  rowsPerPageOptions={[5, 10, 25]}
  component="div"
  count={this.props.logs?.length || 0} // Total number of logs
  rowsPerPage={this.state.rowsPerPage}
  page={this.state.page}
  onPageChange={this.handlePageChange}
  onRowsPerPageChange={this.handleRowsPerPageChange}
/>

4. Common gotchas to check #

• If pages aren't updating: Ensure your handlePageChange and handleRowsPerPageChange are correctly updating the component state.
• If the wrong rows show up: Confirm page starts at 0 (not 1) — your slice logic assumes 0-indexed page numbers.
• If you see duplicate or broken rows: Replace the ix index with a unique identifier from your log data (like el.id) as the key prop in TableRow.

If you're still hitting issues, share more details about what exactly isn't working (e.g., error messages, unexpected behavior) and we can dig deeper!

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