我正在尝试使用setInterval卸载组件。
这是基于这里的答案:
零件:
class ImageSlider extends React.Component { constructor(props) { super(props); this.state = { activeMediaIndex: 0 }; } componentDidMount() { setInterval(this.changeActiveMedia.bind(this), 5000); } changeActiveMedia() { const mediaListLength = this.props.mediaList.length; let nextMediaIndex = this.state.activeMediaIndex + 1; if(nextMediaIndex >= mediaListLength) { nextMediaIndex = 0; } this.setState({ activeMediaIndex:nextMediaIndex }); } renderSlideshow(){ const singlePhoto = this.props.mediaList[this.state.activeMediaIndex]; return( <div> <img src={singlePhoto.url} /> </div> ); } render(){ return( <div> {this.renderSlideshow()} </div> ) } }
现在,当我转到另一个页面时,出现此错误:
Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component
因此,我添加了以下内容:
componentWillUnmount(){ clearInterval(this.interval); }
我也尝试过:
componentWillUnmount(){ clearInterval(this.changeActiveMedia); }
但是我仍然每5秒就会收到上述错误。有清除间隔的适当方法吗?
setInterval返回您可以在中使用的in间隔ID clearInterval。
setInterval
clearInterval
有关setInterval的更多信息
这样的事情应该起作用:
this.myInterval = setInterval(this.changeActiveMedia.bind(this), 5000)
然后在componentWillUnmount中:
clearInterval(this.myInterval);