React 应用程序中的音频标签在过滤音频剪辑列表时播放错误的音频剪辑

Question

我正在开发一个简单的反应应用程序，该应用程序允许使用 HTML 音频标签播放一组 mp3 文件并过滤一组 mp3 文件以允许用户找到他们想要播放的文件。

当没有应用过滤并且我看到每个 mp3 文件的音频播放器时，它工作正常。但是当我过滤 mp3 文件列表时，我看到一个正确减少的音频播放器列表，但它们现在并不总是播放正确的文件。

例如，如果我有三个mp3 - A，B和C - 然后我过滤以仅显示B和C，我现在看到两个音频播放器。但是他们会玩 A 和 B，而不是 B 和 C。在这种情况下，当 A 被过滤掉时，我希望应用程序显示实际播放 B 和 C 的 B 和 C 的音频元素。

我已经在 React 沙箱中整理了一些代码，我希望能显示问题所在。如果在示例应用中筛选 mp3 以仅显示尤克里里声音剪辑，则当您单击播放按钮时，它仍会播放第一个 mp3。

https://codesandbox.io/s/react-example-5y0bp?fontsize=14&hidenavigation=1&theme=dark

我现在在Chrome，Firefox和Edge上看到了这种行为。即使在iOS上的Chrome上。

知道这里发生了什么吗？或者我如何防止或解决这个问题？我只是错过了一些显而易见的东西吗？欢迎任何建议。

谢谢。

Answer 1

目前，示例应用程序发出以下错误：Warning: Each child in an array or iterator should have a unique "key" prop..您需要为从Array.prototype.map()返回的每个项目添加一个唯一键。这将有助于"React 识别哪些项目已更改、添加或删除"，并在您的情况下确保过滤可以有效工作。在您的情况下，看起来每个URL都是唯一的，因此也许可以将其用作有效的key：

<div>
<h1>Filter</h1>
<input value={this.state.text} onChange={e => this.handleChange(e)} />
<ol>
{filteredList.map((item, index) => {
return (
<div key={item}>
{item} -{" "}
<audio controls preload="none">
<source src={item} type="audio/mpeg" />
</audio>
</div>
);
})}
</ol>
</div>

您可以使用index作为最后的手段key，但建议避免使用索引作为键。否则，您可以使用像uuid这样的包，Date方法，如getTime()，甚至是从每个url字符串值中提取/组合的东西，以便在初始化状态或向状态数组添加项目时创建唯一键。

下面是一个实际示例。