Размонтирование компонента с помощью SetInterval в React

Question

Я пытаюсь размонтировать компонент с помощью 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 секунд. Есть ли правильный способ очистить интервал?

Answer 1

setInterval возвращает идентификатор интервала, который вы можете использовать в clearInterval,

Больше информации о setInterval

Примерно так должно работать:

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

тогда в componentWillUnmount:

clearInterval(this.myInterval);