React- 渲染问题 table

Question

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

这是包含 table 组件 (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 信息。

这是 table 组件代码：

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 组件在行数组完全填充之前渲染如何让 table 仅在行数组完全填充时呈现？？？

Answer 1

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

您可以了解有关状态挂钩的更多信息here。

代码应如下所示（作为注释添加的解释）：

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

React- 渲染问题 table

React- problems rendering table

javascript

rendering

reactjs