Material UI CheckboxTable props变更后不更新问题求助

1. 修复CheckboxTable数据不更新问题 #

子组件将props行数据存入内部state后，默认不会随props变化自动同步，需通过useEffect监听props的行数据变更，更新内部state并处理页码溢出：

import { useEffect, useState } from 'react';

const CheckboxTable = ({ columns, rows, ...rest }) => {
  const [tableRows, setTableRows] = useState(rows);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);

  useEffect(() => {
    setTableRows(rows);
    // 数据更新后若当前页码超出新数据总页数，重置到第一页
    const totalPages = Math.ceil(rows.length / rowsPerPage);
    if (page >= totalPages) {
      setPage(0);
    }
  }, [rows, rowsPerPage]);

  // 其他逻辑...
};

2. 恢复表格密集内边距 #

直接给Material UI的Table组件添加size="small"属性启用密集模式：

<Table size="small" aria-label="checkbox table">
  {/* 表头、表体内容 */}
</Table>

若需自定义内边距，可通过CSS类覆盖：

.dense-table .MuiTableCell-root {
  padding: 6px 16px;
}

然后给TableContainer绑定类名：

<TableContainer className="dense-table">
  <Table>...</Table>
</TableContainer>

3. 恢复排序功能 #

维护排序状态，对表格数据进行动态排序：

import { useMemo, useState } from 'react';
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';

const CheckboxTable = ({ columns, rows, ...rest }) => {
  const [sortBy, setSortBy] = useState('');
  const [sortDirection, setSortDirection] = useState('asc');
  const [tableRows, setTableRows] = useState(rows);

  // 排序触发函数
  const handleSort = (columnId) => {
    const isAsc = sortBy === columnId && sortDirection === 'asc';
    setSortDirection(isAsc ? 'desc' : 'asc');
    setSortBy(columnId);
  };

  // 实时排序数据
  const sortedRows = useMemo(() => {
    if (!sortBy) return tableRows;
    return [...tableRows].sort((a, b) => {
      if (a[sortBy] < b[sortBy]) return sortDirection === 'asc' ? -1 : 1;
      if (a[sortBy] > b[sortBy]) return sortDirection === 'asc' ? 1 : -1;
      return 0;
    });
  }, [tableRows, sortBy, sortDirection]);

  // 表头渲染（带排序按钮）
  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell padding="checkbox">{/* 全选复选框 */}</TableCell>
          {columns.map(column => (
            <TableCell
              key={column.id}
              align={column.align}
              onClick={() => handleSort(column.id)}
              style={{ cursor: 'pointer' }}
            >
              {column.label}
              {sortBy === column.id && (
                sortDirection === 'asc' ? 
                  <ArrowUpwardIcon fontSize="small" style={{ marginLeft: 4 }} /> :
                  <ArrowDownwardIcon fontSize="small" style={{ marginLeft: 4 }} />
              )}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      {/* 表体渲染... */}
    </Table>
  );
};

4. 隐藏ID列 #

在父组件传入的columns配置中给ID列添加hidden: true标识，子组件渲染时过滤该列：

// 父组件传入的columns示例
const columns = [
  { id: 'id', label: 'ID', hidden: true },
  { id: 'name', label: '用户名' },
  { id: 'email', label: '邮箱' },
];

// 子组件内过滤可见列
const visibleColumns = columns.filter(col => !col.hidden);

// 渲染表头
<TableHead>
  <TableRow>
    <TableCell padding="checkbox">{/* 全选复选框 */}</TableCell>
    {visibleColumns.map(column => (
      <TableCell key={column.id} align={column.align}>
        {column.label}
      </TableCell>
    ))}
  </TableRow>
</TableHead>

// 渲染表体行
<TableBody>
  {sortedRows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => (
    <TableRow key={row.id}>
      <TableCell padding="checkbox">{/* 行复选框 */}</TableCell>
      {visibleColumns.map(column => (
        <TableCell key={column.id} align={column.align}>
          {row[column.id]}
        </TableCell>
      ))}
    </TableRow>
  ))}
</TableBody>

5. 修复useLocation()错误 #

该错误是因为组件未被React Router的Router组件包裹，解决方式二选一：

• 确保应用根组件被BrowserRouter包裹：

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* 包含CheckboxTable的所有页面/组件 */}
    </BrowserRouter>
  );
}

• 若无需使用useLocation，直接删除代码中对该钩子的引用。

6. 分页逻辑与数据更新同步 #

分页逻辑保持常规实现，结合之前的useEffect即可同步数据更新：

const handleChangePage = (event, newPage) => {
  setPage(newPage);
};

const handleChangeRowsPerPage = (event) => {
  setRowsPerPage(+event.target.value);
  setPage(0);
};

// 渲染分页控件
<TablePagination
  rowsPerPageOptions={[5, 10, 25]}
  component="div"
  count={sortedRows.length}
  rowsPerPage={rowsPerPage}
  page={page}
  onPageChange={handleChangePage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>

内容的提问来源于stack exchange，提问作者The Old County