React SPA 表格仅渲染表头不渲染TableRow行数据问题如何解决

根本原因 #

你代码的核心问题不是表格渲染时机过早，是以下两个错误导致数据更新后视图没有触发重渲染：

• rows 是声明在组件外部的普通数组，没有使用React状态管理，直接调用push修改数组内容不会触发组件更新，所以视图一直停留在第一次渲染的空数组状态
• 组件外层的rows属于全局共享变量，多次渲染组件会导致数据重复累加，出现逻辑异常

修复代码 #

表格组件修改后代码 #

import React, { useState, useEffect } from 'react';
// 原有Table相关组件、useListarSumarios、useListarAulas等引入保持不变即可

function createData(conteudo, disciplina, curso, dataAula) {
  return { conteudo, disciplina, curso, dataAula };
}

export default function SumariosDenseTable() {
  const { sumarios } = useListarSumarios();
  const { cursoSigla } = useListarAulas();
  // 用useState管理rows，修改会触发组件重渲染
  const [rows, setRows] = useState([]);
  // 加载状态，可自定义展示样式
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 确保sumarios有数据后再处理
    if (!sumarios?.length) return;
    const newRows = sumarios.map((sum) =>
      createData(
        sum.sumario.conteudo,
        sum.disciplina.codigo,
        cursoSigla(sum.cursos),
        sum.data
      )
    );
    setRows(newRows);
    setIsLoading(false);
  // 依赖项不要加rows，否则会触发死循环
  }, [sumarios, cursoSigla]);

  // 数据加载完成前展示加载提示，也可直接返回null
  if (isLoading) return <div>数据加载中...</div>;

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell>Conteudo</TableCell>
            <TableCell align="right">Disciplina</TableCell>
            <TableCell align="right">Cursos</TableCell>
            <TableCell align="right">Data</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.conteudo}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
            >
              <TableCell component="th" scope="row">
                {row.conteudo}
              </TableCell>
              <TableCell align="right">{row.disciplina}</TableCell>
              <TableCell align="right">{row.curso}</TableCell>
              <TableCell align="right">{row.dataAula}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

补充说明 #

如果不需要加载提示，可直接删除isLoading相关逻辑，rows为空时表格主体默认无内容，数据更新后状态变化会自动触发重渲染填充行数据，完全符合你的需求。

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