React jsx类在添加呈现pdf会话后两次显示数据

import React, { useState, useEffect } from 'react';
import { Document, Page } from 'react-pdf';
import axios from 'axios';

const PdfViewer = () => {
  const [pdfData, setPdfData] = useState(null);
  const [numPages, setNumPages] = useState(null);

  // 其他代码...
}

useEffect(() => {
  axios.get('path/to/pdf/file.pdf', { responseType: 'arraybuffer' })
    .then(response => {
      setPdfData(new Blob([response.data], { type: 'application/pdf' }));
    })
    .catch(error => {
      console.error('Error fetching PDF data:', error);
    });
}, []);

return (
  <div>
    {pdfData && (
      <Document file={pdfData} onLoadSuccess={({ numPages }) => setNumPages(numPages)}>
        {Array.from(new Array(numPages), (el, index) => (
          <Page key={`page_${index + 1}`} pageNumber={index + 1} />
        ))}
      </Document>
    )}
  </div>
);