动态文件源 React-PDF (Hooks)

Question

我正在尝试实现一个 react-pdf 解决方案，用户可以在其中 select 他们想要呈现哪个 pdf。我想出了一个 hooks 解决方案，但不明白为什么 PDF 没有呈现。


import React,{useState,useEffect} from  'react';
import samplePDF from "somelocalpath/microcert.pdf";
import file2 from "somelocalpath/CourseCertificate.pdf";
import { Document, Page,pdfjs } from 'react-pdf';
import './frontend.css';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

function Pdfview(){
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);
  const [pdfile,setPDF]=useState('');
  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
    setPageNumber(1);
    console.log(pdfile);
  }

  function changePage(offset) {
    setPageNumber(prevPageNumber => prevPageNumber + offset);
  }
  function changePDF(){
    setPDF({file2})
 }

  function previousPage() {
    changePage(-1);
  }

  function nextPage() {
    changePage(1);
  }
  useEffect(()=>{
  },[pdfile]);

  return(
  <div className='grid-container'>
    <div className='sidespace'></div>
      <div className='sidebar'>
        <button onClick={changePDF}>Click Here to Change PDF</button>
      </div>
        <div className='pdf'>
        <Document
        file={pdfile}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <div>
        <p>
          Page {pageNumber || (numPages ? 1 : '--')} of {numPages || '--'}
        </p>
        <button
          type="button"
          disabled={pageNumber <= 1}
          onClick={previousPage}
        >
          Previous
        </button>
        <button
          type="button"
          disabled={pageNumber >= numPages}
          onClick={nextPage}
        >
          Next
        </button>
      </div>
        </div>
        <div className='sidespaceright'></div>
  </div> 
);
}


export default Pdfview;

我知道如果我将文件设置为 {samplePDF} 或 {file2}，PDF 将会呈现，但我似乎无法弄清楚为什么它在使用 useState 挂钩的 pdfile 时不会呈现。尝试渲染时出现此错误：

Error: Invalid parameter object: need either .data, .range or .url
    at _callee2$ (Document.js:332)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at Document.findDocumentSource (asyncToGenerator.js:21)
    at _callee$ (Document.js:100)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)
    at asyncToGenerator.js:32
    at new Promise (<anonymous>)
    at Document.loadDocument (asyncToGenerator.js:21)
    at Document.componentDidUpdate (Document.js:388)
    at commitLifeCycles (react-dom.development.js:20684)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at discreteUpdates (react-dom.development.js:22420)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

Answer 1

我想通了。

更改函数：

  function changePDF(){
    setPDF({file2})
 }

至：

  function changePDF(){
    setPDF(file2)
 }

动态文件源 React-PDF (Hooks)

Dynamic file source React-PDF (Hooks)

reactjs

react-pdf

react-hooks

use-effect

use-state