在React中使用SetInterval卸载组件

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用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的更多信息

这样的事情应该起作用：

this.myInterval = setInterval(this.changeActiveMedia.bind(this), 5000)

然后在componentWillUnmount中：

clearInterval(this.myInterval);

以上是 在React中使用SetInterval卸载组件 的全部内容， 来源链接： utcz.com/qa/417901.html

回到顶部