Блог

Мое приложение Electron React использует ReactPDF для рендеринга документов, однако, если я изменю некоторые переменные и установлю состояние, которое не имеет к этому никакого отношения, документ будет повторно отображаться, что очень раздражает. Я визуализирую следующим образом:

  <Document

 onLoadSuccess={({ numPages }) => setNumPages(numPages)}

 noData={<Loader />}

 file={{ data }}

 options={docOptions}

 >
      {Array.from(new Array(numPages), (el, idx) => (
        <div
          className="border"
          key={`page_container_${idx   1}`}
        >
          <Page
            key={`page_${idx   1}`}
            scale={currentZoom}
            pageNumber={idx   1}
            customTextRenderer={makeTextRenderer(searchText)}
            onGetAnnotationsSuccess={(a) => loadFileAnnotations(a)}`
  

https://github.com/wojtekmaj/react-pdf/issues/656

Пожалуйста, используйте React.memo, чтобы остановить повторный рендеринг

 const PdfRender = React.memo(({ invoiceData }: any) => {
  return (
    invoiceData?.pdfUrl amp;amp; (
      <Document
        renderMode="svg"
        file={{
          url: invoiceData?.pdfUrl,
        }}
      >
        <Page pageNumber={1} />
      </Document>
    )
  );
});
  

 
const Invoice = () => {
    const [invoiceData, setInvoiceData] = useState({
        pdfUrl: "",
    });
     useEffect(()=>{
         // set pdfurl in invoice data here first time
     },[]);
     return (<div>
        <PdfRender invoiceData={invoiceData} />
     </div>);
}