@react-pdf/renderer 仅在第一次渲染时显示 pdf

Question

我目前正在使用 react-pdf/renderer 和 Electron-React-Boilerplate。如果我重新启动我的应用程序，pdf 将生成并可见。如果我关闭页面再打开，pdf所在的位置是空白的。

const PdfOrcamentoItem = ({ item }: PropsItem) => {
  return (
    <View style={styles.section}>
      <Text>{item.Descricao}</Text>
      {item.FrontImage ? <Image src={item.FrontImage} /> : null}
    </View>
  );
};
export const OrcamentoTest = ({ items }: Props) => {
  return (
    <Document key={items.length}>
      <Page size="A4" style={styles.page}>
        {items.map((item) => (
          <PdfOrcamentoItem item={item} key={item.Ordem} />
        ))}
      </Page>
    </Document>
  );
};
//-------------------------

export function MyPdf({ items }: Props) {
  return (
    <PDFViewer width="100%" height="100%">
      <OrcamentoTest items={items} />
    </PDFViewer>
  );
}
//--------------------------

// how I call the component
<BasicModal
        title="PDF"
        onClose={() => {
          setPdfModalOpen(false);
        }}
        open={pdfModalOpen}
        fullScreen
      >
        {pdfModalOpen ? (
          <MyPdf items={itemsRef.current} />
        ) : null}
      </BasicModal>

即使我只显示 pdf 文件的下载 link 而不是尝试显示它，它也只适用于组件的第一次渲染。之后 instance.url 变为空。

function MyPdf({ items }: Props) {
  const test = <OrcamentoTest items={items} />;
  const [instance, updateInstance] = usePDF({ document: test });

  if (instance.loading) return <div>Loading ...</div>;

  if (instance.error) return <div>Something went wrong</div>;

  return instance.url ? (
    <a href={instance.url} download="test.pdf">
      Download
    </a>
  ) : (
    <div>Something went wrong</div>
  );
}


// versions
// "react": "^17.0.1",
// "@react-pdf/renderer": "^2.0.17",

我开始认为它可能是一个 webpack 配置，但真的不知道。我已经按照 react-pdf 说明进行操作，但看不出问题出在哪里。如果有人有任何想法可以引导我朝着正确的方向前进，那就太好了。谢谢

Answer 1

我可以通过将我的 @react-pdf/renderer 版本降级到 2.0.16 来避免这个问题。这是一个版本错误。

Github Bug Report

@react-pdf/renderer 仅在第一次渲染时显示 pdf

@react-pdf/renderer only displays pdf on first render

node.js

electron

react-pdf

electron-react-boilerplate