React JS无法正确渲染HTML5音频标签

Question

我正在将React JS与Spotify Web API结合使用以实现Web api搜索，并且每个页面显示10个结果以及一个下一个按钮。每个音轨都有一个html5音频标签，可让我播放歌曲的预览。呈现下10个结果时，html会正确呈现（使用新的音频源），但是当我播放它时，它将播放原始10个结果中的歌曲。

有趣的是，第二页显示第一组歌曲，然后从第三页可以听到第二组歌曲。其他所有内容（专辑封面，标题）均正确更新。

如何解决此问题？

页面渲染代码：

pageGet(page) {
   var value = false;
   Object.keys(this.state.inputs).map(key => {
     if (this.state.inputs[key] != "") {
       value = true;
     }
   });
   if (value) {
     var url = this.buildUrl(page);
     axios.get(url)
     .then((res) => {
       this.setState({
         items: res.data.tracks.items,
         total: res.data.tracks.total,
         page: page
       })
     });
   }
 }

呈现：

   <SpotifyResults
     tracks={this.state.items}
     page={this.state.page}
     total={this.state.total}
     next={this.next.bind(this)}
   />

Spotify结果：

displayTracks() {
  return this.props.tracks.map((track, i) => {
    return (
      <SpotifyTrack
        key={i}
        track={track}
      />
    );
  });
}

Spotify追踪：

render() {
  return (
    <div className="track-container">
      <div className="album-cover">
        <img src={this.props.track.album.images[0].url}/>
      </div>
        <div className="track-header">
          <p>{this.displayTitle()}</p>
          <br/>
          <span>{this.props.track.artists[0].name}</span>
        </div>
      <div className="track-player">
          <audio controls>
            <source src={this.props.track.preview_url+".mp3"} type="audio/mpeg"/>
            Your browser does not support the audio element.
          </audio>
      </div>
    </div>
  )
}