React-PDF wird immer noch geladen, auch wenn die Datei im Syncfusion-Tab geladen wird

Question

Ich verwende Syncfusion Tab, um mehrere Dateitypen basierend auf Tabs anzuzeigen. Einer der Dateitypen, die ich anzeigen möchte, ist der PDF-Typ. Leider blockiert mich dieser Dateityp im Gegensatz zu allen anderen Dateitypen, die ich anzuzeigen versucht habe.

Ich verwende „react-pdf“ (ich möchte nichts anderes verwenden), um das PDF anzuzeigen und die Datei zu laden, wenn die richtige Registerkarte ausgewählt ist. Wenn wir die Tabs wechseln, werden die Dateien gelöscht. Ich verwende useQuery, um eine Anfrage an den Server zu senden und die Datei aus der Datenbank abzurufen. Ich kann die Datei in der Konsole drucken, aber aus irgendeinem Grund bleibt „react-pdf“ in der Tab-Komponente im Ladezustand hängen.

Ich habe versucht, dasselbe zu replizieren, indem ich nur die Komponente „react-pdf“ und eine Schaltfläche verwendet habe, die „useQuery“ aufruft, um die Datei abzurufen, und es funktioniert einwandfrei, das PDF wird angezeigt, aber nicht in der Tab-Komponente.

Mein Code lautet wie folgt:

Abfrage verwenden:

const { status, data, error, isFetching, refetch } = useQuery(['facture', id], async () => {
     const data = await getUniqueCassandraFile(id)
     setFile(data.rows[0].file)
     return data.rows[0].file
}, {
     enabled: false,
     refetchOnWindowFocus: false
})

renderPdf-Funktion befindet sich in einer anderen Datei, ebenso wie andere Renderfunktionen basierend auf dem Typ, der Dateiparameter ist der Status der übergeordneten Komponente, der durch das useQuery-Ergebnis (in der übergeordneten Komponente) aktualisiert wird. Die Abfrage wird jedes Mal erneut abgerufen, wenn eine neue Registerkarte ausgewählt wird (Ereignis auswählen):

export const renderPdf = (id, file) => {
    if(!file){
        return waiting(id)
    }
    return (
        <div key={id} className='file_container'>
            <Document file={`data:application/pdf;base64,${file}`} style={{height:50+'vh'}}>
                <Page size="A4" pageNumber={1} className="pdfFacture">
                </Page>
            </Document>
        </div>
    )
}

Tab-Komponente:

<div className="control-section tab-control-section">
   {chosenItem === -1 ? emptyDiv : 
   <TabComponent overflowMode="Scrollable" id="defaultTab" selecting={selecting} 
   selectedItem={chosenItem}>
      <TabItemsDirective>
      {
         header.map((item, index) => {
            return <TabItemDirective presentation={true} key={index} header={item} 
               content={{
                  template: tabContent, 
                  data: {content: content[index], type: item.type, id: item.id}}}/>
               })
            }
            </TabItemsDirective>
         </TabComponent>
      }
 </div>

Und TabContent-Vorlagen zum Erstellen jeder Registerkarte:

const tabContent = (data) => {
   return <div dangerouslySetInnerHTML={{__html: ReactDOMServer.renderToStaticMarkup(
             isFetching ? emptyDiv :
             switchRender(data.id, data.type, file))}}>
   </div>;
};

Answer 1

您正在基于共享细节的选项卡选择事件中加载文件。因此，我们建议您在选项卡选中事件中加载文件，而不是选择事件，以解决报告的问题。由于选中事件将在内容呈现在DOM中后触发。

https://ej2.syncfusion.com/react/documentation/api/tab#selected