在 componentDidMount 中启动 setTimeout 并在 React 中的 componentWillUnmount 中结束

问题描述

我来这里是为了请求您的帮助（我确定这很小）让我发疯。首先，我对 React 还很陌生，这可能就是为什么我很难解决这个问题的原因。 基本上，我在网站上放了一个幻灯片，每四秒显示一张图片，它运行得很好，直到我卸载了保存幻灯片的组件（因为 setTimeout 没有停止）。我承认，起初我决定让它成为现实，因为它并没有破坏网站，但后来我发现它与移动视图混乱，所以我必须修复它。问题是：我似乎无法找到在 componentwillUnmount 中使用 clearTimeout 的方法。你能帮我吗？这是我的组件：

class PictureSlider extends React.Component {

componentDidMount() {
    
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) { slideIndex = 1 }
        slides[slideIndex - 1].style.display = "block";
        setTimeout(showSlides,4000)
        
    }
}

componentwillUnmount() {
}

render() {
    return (
        <div className="slideshow-container">
            <div className="mySlides fade">
                <img src="/images/photo/image00024.jpeg" style={{ width: '100%' }} />
            </div>

            <div className="mySlides fade">
                <img src="/images/photo/image00005.jpeg" style={{ width: '100%' }} />
            </div>

            <div className="mySlides fade">
                <img src="/images/photo/image00021.jpeg" style={{ width: '100%' }} />
            </div>

            <div className="mySlides fade">
                <img src="/images/photo/image00025.jpeg" style={{ width: '100%' }} />
            </div>

            <div className="mySlides fade">
                <img src="/images/photo/image00014.jpeg" style={{ width: '100%' }} />
            </div>

            <div className="mySlides fade">
                <img src="/images/photo/image00029.jpeg" style={{ width: '100%' }} />
            </div>

            <div className="mySlides fade">
                <img src="/images/photo/image00030.jpeg" style={{ width: '100%' }} />
            </div>

            <div className="mySlides fade">
                <img src="/images/photo/euro1ad.jpg" style={{ width: '100%' }} />
            </div>
        </div>
        );
}

解决方法

这就是你可以做到的。

class PictureSlider extends React.Component {
  state = {
    timeout: null,}

  componentDidMount() {
    var slideIndex = 0
    showSlides()

    function showSlides() {
      var i
      var slides = document.getElementsByClassName('mySlides')
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none'
      }
      slideIndex++
      if (slideIndex > slides.length) {
        slideIndex = 1
      }
      slides[slideIndex - 1].style.display = 'block'
      // assign to state variable
      this.setState({ timeout: setTimeout(showSlides,4000) })

    }
  }

  componentWillUnmount() {
    // clear the timeout assigned to state
    clearTimeout(this.state.timeout)
  }

  render() {
    return (
      <div className='slideshow-container'>
        <div className='mySlides fade'>
          <img src='/images/photo/image00024.jpeg' style={{ width: '100%' }} />
        </div>

        <div className='mySlides fade'>
          <img src='/images/photo/image00005.jpeg' style={{ width: '100%' }} />
        </div>

        <div className='mySlides fade'>
          <img src='/images/photo/image00021.jpeg' style={{ width: '100%' }} />
        </div>

        <div className='mySlides fade'>
          <img src='/images/photo/image00025.jpeg' style={{ width: '100%' }} />
        </div>

        <div className='mySlides fade'>
          <img src='/images/photo/image00014.jpeg' style={{ width: '100%' }} />
        </div>

        <div className='mySlides fade'>
          <img src='/images/photo/image00029.jpeg' style={{ width: '100%' }} />
        </div>

        <div className='mySlides fade'>
          <img src='/images/photo/image00030.jpeg' style={{ width: '100%' }} />
        </div>

        <div className='mySlides fade'>
          <img src='/images/photo/euro1ad.jpg' style={{ width: '100%' }} />
        </div>
      </div>
    )
  }
}

,

您可以将您的 setTimeout 分配给一个变量并在 componentWillUnmount 中清除它。

使用 setInterval

处理图像滑块（轮播）的更好方法

示例

  componentDidMount() {
    var slideIndex = 0;

    this.timer = setInterval(() => {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }
      slideIndex++;
      if (slideIndex > slides.length) {
        slideIndex = 1;
      }
      slides[slideIndex - 1].style.display = "block";
    },4000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

Live working demo