javascript - 由于 "state update"，React 安装的组件 setInterval 未清除间隔

我为一个函数设置了一个间隔计时器，该函数将今天的日期设置为我在 componenteDidMount 中初始化的状态。虽然我清除了 componentWillUnmount 中的间隔，但在组件之间快速切换后它仍然会给出错误(这就是我发现错误的方式)。

这是错误:

警告: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
我曾尝试在整个循环中操作一个私有(private) _isMounted 变量从 false 到 true，并在设置状态之前强制对我的 setTodaysDate() 进行条件检查，但即使这样也没有解决问题。

  // _isMounted = false;  <----- tried this method to no avail

  state = {
    selectedDate: ""
  };

  componentDidMount() {
    this.setTodaysDate();
    this.interval = setInterval(() => this.setTodaysDate(), 40 * 1000 * 360);
    // this._isMounted = true;  <----- tried
  }


  componentWillUnmount() {
    clearInterval(this.interval);
    // this._isMounted = false;  <----- tried
  }


  setTodaysDate = () => {
    // if (this._isMounted) {  <----- tried
    this.setState({
      selectedDate: moment(moment(), "YYYY-MM-DDTHH:mm:ss")
        .add(1, "days")
        .format("YYYY-MM-DD")
    });

    // }  <----- tried

  }

我不知道如何“堵住泄漏”。

编辑: 事实证明，多亏了下面的 Gabriele，真正的原因是我使用的 lodash 去抖动方法(我也在那里设置了状态)，我在卸载过程中从未取消过该方法，导致“泄漏”:

  debounceCloseAlert = _.debounce(() => {
    this.setState({ alertVisible: false });
  }, 5000);

最佳答案

查看您的组件，我认为问题不在于您的 setInterval 。您处理它的方式是正确的方法，不应产生所述错误。

我认为问题在于在您的 _.debounce 方法中使用了 debounceCloseAlert 。它还会创建超时，您不会在任何地方清除它。
_.debounce 的返回值包含一个 .cancel() 方法来清除间隔。因此，只需在您的 this.debounceCloseAlert.cancel(); 中调用 componentWillUnmount 即可清除它。

关于javascript - 由于 "state update"，React 安装的组件 setInterval 未清除间隔，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54456662/