反应：TypeError：无法读取null的属性'addEventListener'

Question

我正在尝试创建一个使用第三方音频播放器（react-audioplayer）的组件。但是，我在我的React开发服务器上不断收到此错误：TypeError：无法读取null的属性'addEventListener'。我确保具有适当的依赖性，并且mp3文件的路径正确，因此我不确定发生了什么。在播放列表对象是在组件外部创建的，在其他情况下似乎也可以使用，但是在这种情况下，我无法使其正确缩放。非常感谢您可能提供的任何帮助。我很乐意提供您需要的其他信息。

谢谢

约翰

This is the error I am getting by the way

import React, { Component } from 'react';
import Audio from 'react-audioplayer';
import './Cover.css';

class Cover extends Component {
  constructor(props) {
    super(props);
    this.constructPlaylist = this.constructPlaylist.bind(this);
  }
  constructPlaylist() {
    const episodeName = this.props.episodeNumber;
    const playlist = [{
      name: episodeName,
      src: '../../Episodes/' + this.props.episodeNumber + '/' + this.props.episodeNumber + '.mp3',
    }];
    return playlist;
  }
  render() {
    return (
      <div>
        <img src={require('../../Episodes/' + this.props.episodeNumber + '/' + this.props.episodeNumber + '.png')} alt="" className="cover" />
        <Audio playlist={this.constructPlaylist()} />
      </div>
    );
  }
}

export default Cover;

Answer 1

如医生所说

  

播放列表：歌曲信息对象的数组

将列表而不是函数传递给播放列表可以解决该错误

<Audio playlist={this.constructPlaylist()} />

编辑：将组件复制到我的演示中，调整播放列表数据并呈现良好，因此问题应该存在于其他地方