react pdf抛出渲染的钩子比上一次渲染时多

Question

我正在实现react pdf，以便在web视图中显示pdf。react应用程序可以与Typescript和Next配合使用，如果这在任何方面都有帮助的话。

到目前为止，这是我的代码

const MyPage: NextPage = () => {
// some code here
const [numPages, setNumPages] = useState(null);
const onDocumentLoadSuccess = (numPages:any) =>  {
setNumPages(numPages);
}
return (
<>
<div className="white-background">
<hr />
<div className="pdf-container">
<Document
file={data?.pdf}
options={{ workerSrc: "/pdf.worker.js" }}
onLoadSuccess={onDocumentLoadSuccess}
>
{Array.from(new Array(numPages), (el, index) => (
<Page key={`page_${index + 1}`} pageNumber={index + 1} />
))}
</Document>
<p>
Page {pageNumber} of {numPages}
</p>
</div>

<hr/>
</div>
</>

就我而言，我使用该组件的方式与文档相同，但它抛出了这个错误->

未捕获错误：渲染的钩子比上一次渲染时多。

指向const [numPages, setNumPages] = useState(null);特别是useState(null)

我坚信问题来自于调用onLoadSuccess={onDocumentLoadSuccess}，因为该函数正在调用对钩子的引用，并且每当它返回时，它都会在页面中加载一个额外的钩子，从而引发错误。

那么问题是onLoadSuccess期望的是引用而不是函数

我已经试过用括号((传递，但它抛出了一个错误。到目前为止没有任何线索。

你知道怎么解决吗？

Answer 1

问题是我正在放置

const [numPages, setNumPages] = useState(null);

在我的函数组件中的条件之后。我把它放在顶部，问题就解决了。