音频事件在通过删除事件侦听器删除后仍然触发事件

Audio event still firing off event after removed via removeEventListener

本文关键字：事件 删除 侦听器 音频      更新时间：2023-09-26

我的 React 组件中有以下两个生命周期方法，这是一个包含 HTML <audio> 元素的音轨：

componentDidMount() {
  const {track} = this.props;
  this.refs.audio.src = track.getTrackUrl();
  _.each(this.audioEvents, (callback, eventName) => {
    this.refs.audio.addEventListener(eventName, callback.bind(this));
  });
}
componentWillUnmount() {
  _.each(this.audioEvents, (callback, eventName) => {
    console.info(`Removed ${eventName} from ${this.props.track.name}`);
    this.refs.audio.removeEventListener(eventName, callback.bind(this));
  });
}

我可以从console.info调用中看到所有事件都被删除了，但是在导航离开此特定路由/页面时仍然收到以下错误：

警告：setState（...）：只能更新已挂载或已挂载的组件。这通常意味着您在未挂载的组件上调用了 setState（）。这是无操作。请检查未定义组件的代码。

发生这种情况是因为即使我应该删除了所有事件处理程序，pause回调仍然被触发：

pause() {
  console.log('pause got fired for', this.props.track.name);
  this.setState({playing: false});
},

我错过了什么？我正在尝试在组件卸载时进行很好的清理，但由于某种原因，当我离开页面（导致音频停止播放）时，我的pause事件处理程序仍然会触发。

使用 .bind 时，将创建函数的新实例。因此，当您执行此操作时：

this.refs.audio.addEventListener(eventName, callback.bind(this));

您将无法再删除该事件侦听器，因为您没有保留对 callback.bind(this) 的引用。以下是解决方法。

componentDidMount() {
  const {track} = this.props;
  this.refs.audio.src = track.getTrackUrl();
  this.boundAudioEvents = _.mapValues(this.audioEvents, (callback, eventName) => {
    const boundEvent = callback.bind(this)
    this.refs.audio.addEventListener(eventName, boundEvent);
    return boundEvent;
  });
}
componentWillUnmount() {
  _.each(this.boundAudioEvents, (callback, eventName) => {
    console.info(`Removed ${eventName} from ${this.props.track.name}`);
    this.refs.audio.removeEventListener(eventName, callback);
  });
}
相关文章：