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

Question

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

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

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

我在 React 沙箱中整理了一些代码，希望能显示问题。如果您在示例应用程序中过滤 mp3 以仅显示 ukulele 声音剪辑，当您单击播放按钮时，它仍会播放第一个 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. .您需要添加 unique key从 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 字符串值中提取/组合的内容，以在您初始化状态或将项目添加到状态数组时创建唯一键。

这是 example在行动。