列表中的每个子级在用 PDF 渲染所有 pdf 页面时都应该有一个唯一的"key"道具.JS

Question

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

列表中的每个孩子都应具有唯一的"密钥"道具。

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

我尝试了lodash的uniqueId();它没有某种原因工作。我尝试了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 Prop传递给<div>而不是<PdfRenderer>，因为<div>是实际的子元素。

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