为网格中的多个视频复制视频缩略图答案

【问题标题】：Video thumbnails are duplicated for multiple videos in a grid为网格中的多个视频复制视频缩略图
【发布时间】：2021-04-30 08:19:34
【问题描述】：

背景

使用 Gatsby/React 创建展示图片和视频的作品集页面。我已将媒体源存储在一个数组中，然后遍历该数组以创建一个网格。

问题

网格中的视频缩略图出现重复。第二个视频正在获取第一个视频的缩略图：

不过，开发工具显示这些视频的来源不同。

在另一个页面上再次发生：

视频对象的创建如下：

<VideoContainer key={`vid-${section}-${itemCounter}`}>
  <video className="proj-video" preload="metadata">
    <source src={currImg.src} type={`videomp4`} />
  </video>
  <div className="btn-container">
    <FontAwesomeIcon color="white" size="4x" icon="play" />
  </div>
</VideoContainer>

<VideoContainer /> 是一个样式化的 div。

它发生在多个视频上。到目前为止我尝试过的：

确保这些视频的来源不同。播放视频时（通过单击缩略图上方的播放按钮），将播放正确的视频。
也在video 标签上添加key 属性。但是，这并不能解决问题。

注意：这是一种非常不确定的行为，因为它并不总是发生。有时，它会在页面刷新时得到纠正，有时则不会。

编辑

您可以看到我没有从其他来源设置缩略图。它只显示视频帧。我在视频 URL 的末尾附加 "#t=10"（任何数字），并在视频标签上添加 preload="metadata" 以加载当时的帧。

【问题讨论】：

这听起来可能是补液失败。确保您没有做任何会导致您的初始客户端渲染生成的标记与您的静态、服务器端渲染标记不匹配的事情。
@coreyward 我会调查的。我不知道水合作用问题，所以我会研究它并稍后更新。谢谢。
@coreyward 我做了一些研究，我可以想象这是一次补液失败。但是，我无法在代码中跟踪它（没有这样的代码导致不同的服务器端渲染）。另外，在我的开发模式下，我没有得到任何这样的warning。虽然按照下面的答案更改密钥已经解决了这个问题，但我认为这不是问题（同样，没有重复密钥的警告）。你能谈谈这个吗？
我知道不看代码就很难说什么。不幸的是，我无法共享代码。如果您从经验中想到任何常见问题，请告诉我！再次感谢:)
Gatsby 不会显示水合不匹配的警告，因为它在开发中呈现客户端，并且不支持使用 React 的开发模式进行构建。

标签： javascript html reactjs html5-video gatsby

【解决方案1】：

尝试添加一个更独特的键：

<VideoContainer key={currImg}>
  <video className="proj-video" preload="metadata">
    <source src={currImg.src} type={`videomp4`} />
  </video>
  <div className="btn-container">
    <FontAwesomeIcon color="white" size="4x" icon="play" />
  </div>
</VideoContainer>

vid-${section}-${itemCounter}，就其本身的性质而言，是一个很好的标识符，但不是一个很好的key，但它似乎不像currImg那样独特。

【讨论】：

哇。它似乎已经解决了这个问题！但是，正如我所说，它有时会发生，所以我需要一些时间来确保它有效。顺便问一下，你能解释一下这个解决方案吗？我从来没有收到我正在使用的重复键警告。我也对网格中的图像使用相同的模式img-${section}-${itemCounter}，它不会导致任何问题。那么，为什么会这样呢？
当然！ key 被 React 用来知道哪些元素被更新、删除等。所以应该是唯一的 id。尽管 React 没有警告你（因为 key 在那里），但构建的方式警告我它可能是重复的或错误的，它通常发生在处理循环索引时，因为它不是唯一的该循环可能会在其他地方重复。
@FerranBuireu Keys 只需要在他们的兄弟姐妹中是唯一的。只有当你用另一种类型的数组替换一种类型的数组，但它们之间有重叠的键时，你才会真正遇到麻烦，但这很少见。