Обновление setInterval в React

Question

Это основано на ответе, приведенном здесь:

У меня проблемы со сбросом 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] не существует.

Итак, мой вопрос, есть ли способ сбросить и очистить setInterval всякий раз, когда this.props.mediaList обновляется?

Answer 1

window.setInterval возвращает идентификатор, который идентифицирует Interval таймер. Вы можете использовать его в сочетании с clearInterval отменить интервал.

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

ты можешь использовать componentWillReceiveProps как своего рода общий метод проверки, чтобы увидеть, если mediaList изменился например:

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