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

Question

当我移动到其他页面时，我有两个间隔在主页面运行我发生内存泄漏错误我知道我应该使用componentWillUnmount，以便Interval停止在其他页面中运行，但我不知道如何实现这一点。有人可以帮忙吗

 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

基本上，你需要的是在你的clearInterval中使用componentWillUnmount函数。

为了使用它，你需要保存你的间隔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(...) })

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

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