Creé una tabla que tiene algunas características, cada fila puede generar un pdf y descargar usando render-pdf npm, quiero mostrar cuando el usuario hace clic en el botón de descarga vista previa de pdf en una nueva página, funciona pero los problemas de renderizado en el método que pasan todos los datos de la fila de datos como accesorios en la carga de la página, afecta la página a veces, y la página se bloqueó. Intenté con un solo clic enviar datos particulares en los accesorios, no funciona bien. Por favor, ayuda a cualquier idea.
Gracias por la ayuda
import React, { useState } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material-ui/core/TableContainer'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import { Container } from '@material-ui/core'; import { Text, Page, Document, BlobProvider } from '@react-pdf/renderer'; const data = [ { id: 5, name: 'test', email: 'test@gmail.com' } ]; const MyDoc = ({ data }) => ( <Document> <Page> <Text>{data.name}</Text> </Page> </Document> ); export default function App() { const classes = useStyles(); return ( <div className={classes.root}> <Container> <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple table"> <TableHead> <TableRow> <TableCell>ID</TableCell> <TableCell> Name</TableCell> <TableCell>Email</TableCell> <TableCell>Pdf</TableCell> </TableRow> </TableHead> <TableBody> {data.map(booking => ( <TableRow key={booking.id}> <TableCell>{booking.id}</TableCell> <TableCell>{booking.name}</TableCell> <TableCell>{booking.email}</TableCell> <TableCell> <BlobProvider document={<MyDoc BookingData={booking} />}> {({ url }) => ( <a href={url} target="_blank"> Open in new tab </a> )} </BlobProvider> </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </Container> </div> ); }No estoy completamente seguro, pero creo que el problema radica aquí: <BlobProvider document={<MyDoc BookingData={booking} />}> and const MyDoc = ({ data }) => . Tienes que desestructurar BookingData en MyDoc , no data . Creo que los data en MyDoc están en conflicto con la matriz de data .
Prueba esto y hazme saber si funcionó:
Cambio
const MyDoc = ({ data }) => ( <Document> <Page> <Text>{data.name}</Text> </Page> </Document> );a
const MyDoc = ({ pageData }) => ( <Document> <Page> <Text>{pageData.name}</Text> </Page> </Document> );Y
<BlobProvider document={<MyDoc BookingData={booking} />}>a
<BlobProvider document={<MyDoc pageData={booking} />}>Pasas a const MyDoc = ({ data }) => una matriz de objetos, pero cuando llamas a MyDoc, pasas un objeto de document={<MyDoc BookingData={booking} /> intenta solucionar este problema. En lugar de pasar una matriz de objetos, pase solo el primer elemento y háganos saber si esto soluciona su problema