setInterval 在componentDidMount中运行时如何清除Interval onClick？答案

【问题标题】：How to clearInterval onClick while setInterval runs in componentDidMount?setInterval 在componentDidMount中运行时如何清除Interval onClick？
【发布时间】：2019-01-27 04:40:26
【问题描述】：

我有一个标题，其背景图像可以在单击后更改或由于 setInterval 循环而更改。

setInterval 每 7 秒更改一次图像，并在 componentDidMount 中定义。

当我点击一个按钮改变图像时，setInterval 显然不关心并继续运行，所以有时用户无法享受新图像超过一秒钟。

单击按钮时如何重置 setInterval？我的函数handleClick()中不能写clearInterval()，因为setInterval不能访问。

【问题讨论】：

如果是这种情况，则增加 setInterval 的计时器
为什么不能使用clearInterval？你能进一步解释一下吗？
setInterval 在 componentDidMount 中运行。所以我无法在其他地方访问它。当我单击一个按钮时，它会触发一个函数 handleClick()，它将一个动作发送到一个 redux 调度程序，如果我在这个 handleClick 函数中编写 clearInterval(mysetintervalname) ，它不会做任何事情。这是一个范围问题。

标签： reactjs

【解决方案1】：

只需使用this.interval 将间隔保存到类变量中，这样您就可以从任何地方访问。

class Header extends React.Component {
  componentDidMount(){
    this.interval = setInterval(nextImage, 7000);
  }

  handleClick = () => {
    clearInterval(this.interval);
    nextImage();
    this.interval = setInterval(nextImage, 7000);    
  }

  nextImage = () => {
    ...
  }

  render() {
    ...
  }
}

【讨论】：