在 React 中刷新 setInterval [英] Refreshing a setInterval in React

问题描述

这是基于给出的答案此处:

我在重置 setInterval 时遇到问题.

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

class MyComponent 扩展 React.Component {构造函数(道具){超级(道具)；this.state = { activeMediaIndex: 0 };}componentDidMount() {setInterval(this.changeActiveMedia.bind(this), 5000);}更改活动媒体(){const mediaListLength = this.props.mediaList.length;让 nextMediaIndex = this.state.activeMediaIndex + 1;if(nextMediaIndex >= mediaListLength) {下一个媒体索引 = 0;}this.setState({ activeMediaIndex:nextMediaIndex });}渲染幻灯片(){const singlePhoto = this.props.mediaList[this.state.activeMediaIndex];返回(<div><img src={singlePhoto.url}/>

);}使成为(){返回(<div>{this.renderSlideshow()}

)}}

我的问题出现在这里.

我有可以更改列表中对象数量的逻辑，mediaList.

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

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

解决方案

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

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

您可以使用 componentWillReceiveProps 作为一种检查 mediaList 是否已更改的通用方法.例如:

componentWillReceiveProps(nextProps) {如果(nextProps.mediaList ！== this.props.mediaList){clearInterval(this.interval);}}

This is based on the answer given here:

I'm having trouble resetting a setInterval.

As of now the following works. I have a prop called mediaList which contains an object array of images. When changeActiveMedia is called, the object position is moved to the next one in the list.

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

My problem arises here.

I have logic that can change the number of objects in the list, mediaList.

This becomes a problem because since the interval only updates once every 5000 seconds, if the nextMediaIndex within that time is 2, and then I all of a sudden update the mediaList to have only 1 item, I run into an error since mediaList[2] would not exist.

So my question is, is there a way to RESET and CLEAR the setInterval whenever this.props.mediaList is updated?

解决方案

window.setInterval returns an id which identifies an Interval timer. You can use it in conjunction with clearInterval to cancel the interval.

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

you can use componentWillReceiveProps as kind of a generic method of checking to see if mediaList has changed. for example:

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

这篇关于在 React 中刷新 setInterval的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！