Question

当我移到其他页面时，我有两个正在主主页上运行的时间间隔，我收到内存泄漏错误，并且我知道我应该使用componentWillUnmount，以便时间间隔在其他页面上停止运行，但是我不知道如何实现这一目标。有人可以帮忙吗？

 componentDidMount() {
    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }
  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
  };

  widthSlider = () => {
    setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
  };
  componentWillUnmount(){
    //clear Interval here
  }

Answer 1

基本上，您需要在componentWillUnmount中使用clearInterval函数。

要使用它，您需要保存您的时间间隔ID，通常是在componentDidMount()或constructor()

上完成的

 constructor() {
    super();
    // references to 
    this.sliderInterval = null;
    this.animateInterval = null;

 }

 componentDidMount() {

    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }

  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    //save the interval Id
    this.animateInterval = setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
  };

  widthSlider = () => {
    //save the interval Id
    this.sliderInterval = setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
  };
  componentWillUnmount(){
      // clearing the intervals
      if(this.sliderInterval) clearInterval(this.sliderInterval)
      if(this.animateInterval) clearInterval(this.animateInterval)
  }

Answer 2

您可以使用setState保存从setInterval返回的间隔ID，如下所示：

 componentDidMount() {
    this.widthSlider();
    this.startAnimate();
    const wow = new WOW();
    wow.init();
  }
  startAnimate = () => {
    const arr = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine"
    ];
    let counter = 1;
    let animateInterval = setInterval(() => {
      if (counter === 9) {
        counter = 0;
        this.setState(defaultState());
      } else {
        const state = this.state;
        state[
          `animateLeft${arr[counter]}`
        ] = `animated fadeInLeftBig delay-${arr[counter].toLowerCase()}`;
        state[
          `animateRight${arr[counter]}`
        ] = `animated fadeInRightBig delay-${arr[counter].toLowerCase()}`;
        this.setState(state);
      }
      counter++;
    }, 7000);
    this.setState({ animateInterval: animateInterval});
  };

  widthSlider = () => {
    let sliderInterval = setInterval(() => {
      const slide = this.state.width + 100;
      this.state.width === 800
        ? this.setState({
            width: 0
          })
        : this.setState({
            width: slide
          });
    }, 7000);
    this.setState({ sliderInterval : sliderInterval });
  };
  componentWillUnmount(){
    clearInterval(this.state.sliderInterval);
    clearInterval(this.state.animateInterval);
  }

Answer 3

您必须将间隔存储在某个变量中

示例：

this.myinterval = setInterval(...) or this.setState({ myinterval : setInterval(...) })

最近在钩子“ componenWillMount”中清除它：

clearInterval(this.myinterval) or clearInterval(this.state.myinterval)

如何使用componentWillUnmount在React.js中删除setInterval

3 个答案: