React-pdf se charge toujours même lors du chargement du fichier dans l'onglet Syncfusion

Question

J'utilise Syncfusion Tab pour afficher plusieurs types de fichiers en fonction des onglets. L'un des types de fichiers que je souhaite afficher est le type PDF. Malheureusement, contrairement à tous les autres types que j'ai essayé d'afficher, ce type de fichier me bloque en quelque sorte.

J'utilise React-pdf (je ne veux rien utiliser d'autre) pour afficher le PDF et charger le fichier lorsque le bon onglet est sélectionné. Si nous changeons d'onglet, les fichiers sont effacés. J'utilise useQuery pour envoyer une requête au serveur et récupérer le fichier de la base de données. Je peux imprimer le fichier dans la console, mais pour une raison quelconque, dans le composant onglet, React-pdf est bloqué en état de chargement.

J'ai essayé de répliquer la même chose en utilisant uniquement le composant React-pdf et un bouton qui appelle useQuery pour récupérer le fichier et cela fonctionne bien, le PDF est affiché, mais pas dans le composant onglet.

Mon code est le suivant :

Utiliser la requête :

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

La fonction

renderPdf se trouve dans un autre fichier, ainsi que d'autres fonctions de rendu basées sur le type, le paramètre file est l'état du composant parent, qui est mis à jour par le résultat useQuery (dans le composant parent). La requête est récupérée à chaque fois qu'un nouvel onglet est sélectionné (événement sélectionné) :

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

Composant onglet :

<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>

Et des modèles TabContent pour créer chaque onglet :

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

Answer 1

Vous chargez un fichier dans un événement de sélection d'onglets en fonction des détails du partage. Par conséquent, nous vous recommandons de charger le fichier dans l'événement de sélection d'onglet plutôt que dans l'événement de sélection pour résoudre le problème signalé. Puisque l'événement sélectionné sera déclenché une fois le contenu rendu dans le DOM.

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