Question

这是基于给出的答案 here:

我无法重置setInterval。

截至目前，以下工作正在进行中。我有一个名为mediaList的道具，它包含一个图像的对象数组。调用changeActiveMedia时，对象位置将移动到列表中的下一个位置。

class MyComponent 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>
    )
  }
}

我的问题出在这里。

我的逻辑可以改变列表中的对象数量mediaList。

这成为一个问题，因为间隔仅每5000秒更新一次，如果该时间内的nextMediaIndex为2，然后我突然更新mediaList只有1个项目，我遇到了因为mediaList [2]不存在而导致错误。

所以我的问题是，有没有办法在this.props.mediaList更新时重置和清除setInterval？

Answer 1

window.setInterval返回标识Interval计时器的ID。您可以将其与clearInterval结合使用以取消间隔。

this.interval = setInterval(...);
...
clearInterval(this.interval);

您可以使用componentWillReceiveProps作为检查mediaList是否已更改的通用方法。例如：

componentWillReceiveProps(nextProps) {
    if (nextProps.mediaList !== this.props.mediaList) {
        clearInterval(this.interval);
    }
}

刷新React中的setInterval

1 个答案: