我的 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
看到称所有事件都被删除,但在离开此特定路线/页面时我仍然收到以下错误:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.
发生这种情况是因为 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);
});
}
关于javascript - 通过removeEventListener删除后音频事件仍然触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35636453/