Question

每次用户点击映射数组后创建的audio元素时，我都会尝试播放li文件。

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

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

我遇到的问题是音频一直在上一首曲目上播放。我理解这是因为audio的引用在li的每个实例中都不同，因为我已经映射到数组。我想要audio的相同引用，所以我可以确保一次只播放一个audio文件。我还有一个prop来确定当前是否正在播放audio文件。

有谁知道如何克服这个问题？

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

};

Answer 1

你应该这样试试

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

对映射数组中的每个项目的单独音频的React句柄问题

1 个答案: