javascript - React render-pdf open in new page onclick 慢问题

Question

我创建了一个表，它具有一些功能，每一行都可以生成一个 pdf 并使用 render-pdf npm 下载，我想在用户单击新页面上的下载按钮 pdf 预览时显示，它可以工作，但问题呈现在方法他们在页面加载时将所有数据行数据作为 Prop 传递它有时会影响页面，并且页面崩溃我尝试单击一次在 Prop 中发送特定数据它不能正常工作，请帮助任何想法它对我来说非常完整。
感谢帮助

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

Answer 1

我不完全确定，但我认为问题出在:<BlobProvider document={<MyDoc BookingData={booking} />}>和 const MyDoc = ({ data }) => .你必须解构BookingData在 MyDoc不是 data .我认为 data在 MyDoc与 data 冲突大批。
试试这个，让我知道它是否有效:
改变

const MyDoc = ({ data }) => (
  <Document>
    <Page>
      <Text>{data.name}</Text>
    </Page>
  </Document>
);

至

const MyDoc = ({ pageData }) => (
  <Document>
    <Page>
      <Text>{pageData.name}</Text>
    </Page>
  </Document>
);

和

<BlobProvider document={<MyDoc BookingData={booking} />}>

至

<BlobProvider document={<MyDoc pageData={booking} />}>