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

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

您可以使用 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 2

基本上，您需要在 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 3

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

示例：

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

最近在钩子中清除它"componenWillMount":

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

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

How to use componentWillUnmount to remove setInterval in React.js

javascript

components

setinterval

reactjs

react-component