在 componentDidMount 开始一个 setTimeout，在 React 的 componentWillUnmount 结束

Question

我来这里是为了请求你的帮助，这是一件让我发疯的小事（我敢肯定它很小）。首先，我对 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>
        );
}

Answer 1

这就是你可以做到的。

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

Answer 2

您可以将 setTimeout 分配给一个变量并在 componentWillUnmount.[=15 中清除它=]

使用 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

在 componentDidMount 开始一个 setTimeout，在 React 的 componentWillUnmount 结束

Start a setTimeout in componentDidMount and end it in componentWillUnmount in React

reactjs

reactjs.net