列表中的每个 child 都应该有一个唯一的 "key" 属性，同时使用 PDF.JS 渲染所有 pdf 页面

Question

我正在用 React 在 pdf.js 上写一个包装器。首先，我使用 getDocument() 加载 pdf 文档，然后我使用创建 canvas 的专用组件渲染每个页面并绘制 pdf 文件（根据 pdf.js API）。一切正常，唯一的问题是控制台中的错误：

Each child in a list should have a unique "key" prop.

每个pdf页面的关键是什么？页面似乎没有唯一键。

我尝试了 uniqueId() 个 lodash；由于某种原因它没有工作。我试过new Date().getTime()，也试过给每个键一个数组索引，但我得到了同样的错误。

{[...Array(this.state.numberOfPages)].map((_, page) => {
  return (
    <div style={{ width: '100%' }}>
   <PdfRenderer 
// im a component that does pdfDocument.getPage(currentPage)
     key={page}
     pdfDocument={this.state.pdfDocument}
     currentPage={page}
     scale={currentScale}
   />
  {this.renderLoading()}
</div>
);
})}

Answer 1

您应该将 key 属性传递给 <div> 而不是 <PdfRenderer>，因为 <div> 是实际的子元素。

<div key={page}>
  <PdfRenderer
    pdfDocument={this.state.pdfDocument}
    currentPage={page}
    scale={currentScale}
  />
</div>

列表中的每个 child 都应该有一个唯一的 "key" 属性，同时使用 PDF.JS 渲染所有 pdf 页面

Each child in a list should have a unique "key" prop while rendering all pdf pages with PDF.JS

pdf.js

reactjs