Javascript React处理映射数组中每个项目的单独音频问题

每次用户单击在数组上映射后创建的

li

元素时，我都试图播放

音频文件

在我的React类中，我将传递一个（称为
歌曲
）对象数组作为道具，如下所示：

const songs = [{
    name: 'Oasis',
    url: 'oasis.mp3'
  },
  {
    name: 'Blur',
    url: 'blur.mp3'
  },
  {
    name: 'U2',
    url: 'u2.mp3'
  },
];

我遇到的问题是，音频在前一首曲目中不断播放。我理解这是因为
audio
的引用在
li
的每个实例中是不同的，正如我在数组上映射的那样。我希望对
音频
进行相同的引用，以便确保一次只能播放一个
音频
文件。我还有一个
道具
，用于确定当前是否正在播放
音频
文件

有人知道如何克服这个问题吗

class Audio extends Component {

    render() {

       this.props.songs.map(song => {

          let audio;

          const playSong = () => {

            if(!this.props.audioPlaying){
               audio = new Audio(song.url);
               audio.play();
            } else {
               audio.pause();
               audio = new Audio(song.url);
               audio.play();
            }
          }

         return (
           <li onClick={ playSong }>Play { song.name }</li>
         );
      };

};

class音频扩展组件{
render（）{
this.props.songs.map（歌曲=>{
让音频；
康斯特播放歌曲=（）=>{
如果（！this.props.audioPlaying）{
音频=新音频（song.url）；
音频播放（）；
}否则{
audio.pause（）；
音频=新音频（song.url）；
音频播放（）；
}
}
返回(
播放{song.name}
);
};
};
你应该这样试试

class Audio extends Component {

    static audio;

    playSong = (song) => {
        if(!this.props.audioPlaying){
            this.audio = new Audio(song.url);
            this.audio.play();
        } else {
            this.audio.pause();
            this.audio = new Audio(song.url);
            this.audio.play();
        }
    }

    render() {
       this.props.songs.map(song => {
         return (
           <li onClick={(song) => this.playSong(song)}>Play { song.name }</li>
         );
      });
    }
};

class音频扩展组件{
静态音频；
播放歌曲=（歌曲）=>{
如果（！this.props.audioPlaying）{
this.audio=新音频（song.url）；
这个.audio.play（）；
}否则{
this.audio.pause（）；
this.audio=新音频（song.url）；
这个.audio.play（）；
}
}
render（）{
this.props.songs.map（歌曲=>{
返回(
this.playSong（song）}>Play{song.name}
);
});
}
};
就我所知，你不能在这样的课堂上做
var audio
，请检查now@peterflanagan，请检查最后一个答案。你能为这个制作plnkr或JSFIDLE吗？在它周围玩一点就行了。干杯。我用了
静态音频
，但同样的东西。我会给你绿色的勾号