Javascript React JS未正确重新显示html5音频标签

我使用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}
      />
    );
  });
}

displayTracks（）{
返回此.props.tracks.map（（track，i）=>{
返回(
);
});
}

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>
  )
}

render（）{
返回(
{this.displayTitle（）}



{this.props.track.artists[0].name}
您的浏览器不支持音频元素。
)
}

Update：我修复了这个问题，在渲染spotify曲目时提供了唯一的键，包括页码。我制作了键：I+（this.props.page-1）*10），而不仅仅是当前曲目集的索引。