Estoy creando un SPA de reacción, mi problema es que cuando voy a la página donde mi tabla es solo la información de TableRow que se representa, he intentado usar la representación condicional pero sigo teniendo el mismo problema.
esta es la página con el componente de tabla (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> ); }cuando soy redirigido a esta página, solo se muestra la información de TableHead.
este es el código del componente de la tabla:
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> ); }el problema es que el componente de la tabla se procesa antes de que la matriz de filas se llene por completo. ¿Cómo hago para que la tabla se represente solo cuando la matriz de filas está completamente llena?
Debe usar useState (gancho de estado) para la variable de rows . De esta forma, cuando useEffect de llenar la variable de rows , el componente se volverá a representar.
Puede obtener más información sobre el gancho de estado aquí .
El código debería verse así (explicación añadida como comentarios):
// 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; } }