React-渲染表的问题

Question

我正在创建一个 React SPA，我的问题是当我转到我的表格只是呈现的 TableRow 信息的页面时，我尝试使用条件渲染，但我仍然遇到同样的问题。

这是带有表格组件的页面（sumariosDenseTable）：

import React, { useState, useEffect } from 'react';

import { Container } from './styles';

import SumariosDenseTable from '../../components/SumariosDenseTable';

export default function Sumarios() {
  return (
    <Container>
      <div className="title">Listar Sumários</div>

      <SumariosDenseTable />

    </Container>
  );
}

当我被重定向到这个页面时，只会呈现 TableHead 信息。

这是表格组件代码：

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

const rows = [];

export default function SumariosDenseTable() {
  const { sumarios } = useListarSumarios();
  const { cursoSigla } = useListarAulas();

  React.useEffect(() => {
    if (rows.length !== sumarios.length) {
      sumarios.map((sum) =>
        rows.push(
          createData(
            sum.sumario.conteudo,
            sum.disciplina.codigo,
            cursoSigla(sum.cursos),
            sum.data
          )
        )
      );
    }
  }, [sumarios, rows]);

  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>
  );
}

问题是table组件是在rows数组完全填满之前渲染的 只有当行数组完全填满时，如何才能渲染表格？？？

Answer 1

您需要为rows 变量使用useState（状态挂钩）。这样，当useEffect 完成填充rows 变量时，组件将被重新渲染。

你可以了解更多关于状态钩子here。

代码应如下所示（解释为 cmets）：

// Add useState import at the top
import { useState } from "react";

// All other imports and the rest of the top half of your code are still here

export default function SumariosDenseTable() {
    const { sumarios } = useListarSumarios();
    const { cursoSigla } = useListarAulas();

    // Use useState for the rows and set it's initial value to empty ([])
    const { rows, setRows } = useState([]);

    React.useEffect(() => {
        if (rows.length !== sumarios.length) {
            const tempRows = [];
            sumarios.map((sum) =>
                tempRows.push(
                    createData(
                        sum.sumario.conteudo,
                        sum.disciplina.codigo,
                        cursoSigla(sum.cursos),
                        sum.data
                    )
                )
            );

            // update the rows variable via the hook
            setRows(tempRows);
        }
    }, [sumarios, rows]);

    if (rows.length > 0) {
        return (
            <TableContainer component={Paper}>
               //The rest of the table code here
            </TableContainer>
        );
    } else {
        // If no rows, don't render anything at all
        return null;
    }
}