동기화 탭에서 파일을 로드하는 경우에도 React-pdf가 계속 로드됩니다.

Question

탭을 기반으로 여러 유형의 파일을 표시하기 위해 Syncfusion Tab을 사용하고 있습니다. 표시하고 싶은 파일 형식 중 하나는 PDF 형식입니다. 불행하게도 내가 표시하려고 시도한 다른 모든 유형과 달리 이 유형의 파일은 일종의 방해가 됩니다.

나는 PDF를 표시하고 올바른 탭이 선택되면 파일을 로드하기 위해 반응 PDF(다른 것은 사용하고 싶지 않음)를 사용하고 있습니다. 탭을 전환하면 파일이 지워집니다. 나는 useQuery를 사용하여 서버에 요청을 보내고 데이터베이스에서 파일을 가져옵니다. 콘솔에서 파일을 인쇄할 수 있지만 어떤 이유로 탭 구성 요소에서 반응 PDF가 로드 상태에서 멈췄습니다.

나는 단지 반응 PDF 구성 요소와 파일을 검색하기 위해 useQuery를 호출하는 버튼을 사용하여 동일한 것을 복제하려고 시도했는데 제대로 작동하고 PDF가 표시되지만 탭 구성 요소에는 표시되지 않습니다.

내 코드는 다음과 같습니다:

쿼리 사용:

으아아아

renderPdf 함수는 유형에 따른 다른 렌더링 함수뿐만 아니라 다른 파일에 있으며, 파일 매개변수는 상위 구성 요소의 useQuery 결과에 의해 업데이트되는 상위 구성 요소의 상태입니다(상위 구성 요소에서). 새 탭이 선택될 때마다 쿼리가 다시 가져옵니다(이벤트 선택):

으아아아

탭 구성 요소:

으아아아

각 탭을 생성하기 위한 TabContent 템플릿:

으으으으

Answer 1

공유 세부정보를 기반으로 탭 선택 이벤트에서 파일을 로드하고 있습니다. 따라서 보고된 문제를 해결하려면 선택 이벤트가 아닌 탭 선택 이벤트에서 파일을 로드하는 것이 좋습니다. 선택한 이벤트는 컨텐츠가 DOM에서 렌더링된 후에 시작되기 때문입니다.

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