Saya menggunakan Tab Syncfusion untuk memaparkan berbilang jenis fail berdasarkan tab. Salah satu jenis fail yang saya ingin paparkan ialah jenis PDF. Malangnya, tidak seperti semua jenis lain yang saya cuba paparkan, jenis fail ini menyekat saya.

Saya menggunakan react-pdf (saya tidak mahu menggunakan apa-apa lagi) untuk memaparkan PDF dan memuatkan fail apabila tab yang betul dipilih. Jika kita menukar tab, fail akan dikosongkan. Saya menggunakan useQuery untuk menghantar permintaan kepada pelayan dan mendapatkan fail daripada pangkalan data. Saya boleh mencetak fail dalam konsol, tetapi atas sebab tertentu, dalam komponen tab, react-pdf tersekat dalam keadaan memuatkan.

Saya cuba mereplikasi perkara yang sama hanya menggunakan komponen react-pdf dan butang yang memanggil useQuery untuk mendapatkan semula fail, dan ia berfungsi dengan baik, PDF dipaparkan, tetapi tidak dalam komponen tab.

Kod saya adalah seperti berikut:

Gunakan pertanyaan:

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

Fungsi renderPdf berada dalam fail lain, serta fungsi pemaparan lain berdasarkan jenis, parameter fail ialah keadaan komponen induk, yang dikemas kini oleh hasil useQuery (dalam komponen induk). Pertanyaan diambil semula setiap kali tab baharu dipilih (pilih acara):

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

Komponen tab:

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

Dan templat Kandungan Tab untuk membuat setiap tab:

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