我正在使用Syncfusion Tab來根據選項卡顯示多種類型的檔案。 我想要顯示的一種文件類型是PDF類型。 不幸的是，與我嘗試顯示的所有其他類型不同，這個類型的文件有點阻塞我。

我使用react-pdf（我不想使用其他任何東西）來顯示PDF，並在選擇正確的選項卡時加載文件。如果我們切換選項卡，檔案會被清空。我使用useQuery來向伺服器發送請求並從資料庫取得檔案。我可以在控制台列印文件，但由於某種原因，在選項卡組件中，react-pdf停留在加載狀態。

我嘗試使用只有react-pdf元件和呼叫useQuery來檢索文件的按鈕來複製相同的事情，它可以正常工作，PDF被顯示出來，但在選項卡元件中不行。

我的程式碼如下：

使用查詢：

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函數在另一個檔案中，以及其他根據類型的渲染函數，file參數是父元件的狀態，該狀態由useQuery結果（在父元件中）更新。每次選擇新的選項卡時，查詢都會重新取得（選擇事件）：

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

選項卡元件：

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

以及用於建立每個選項卡的TabContent範本：

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