Javascript React安装的部件设置间隔不是清除间隔，因为；“状态更新”；

我为一个函数设置了一个间隔计时器，该函数将今天的日期设置为我在

componenteddmount

中初始化的状态。虽然我清除了

组件willunmount

中的间隔，但在快速切换组件后仍然会出现错误（这就是我发现错误的原因）

这就是错误：

警告：

无法对未安装的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

我曾尝试在整个周期内将私有的

\u 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

  }

---

是否已尝试在组件的状态下保存间隔引用

  state = {
    selectedDate: "",
    interval: null
  };

  componentDidMount() {
    this.setTodaysDate();
    const interval = setInterval(() => this.setTodaysDate(), 40 * 1000 * 360);
    this.setState({interval});
  }


  componentWillUnmount() {
    clearInterval(this.state.interval);
  }


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


  }

有些人似乎也通过使用interval获得了一些运气。\u id:

（使用您的初始代码）

---

查看您的组件，我认为问题不在于您的

setInterval

。您处理它的方式是正确的方法，不应产生上述错误

我认为问题在于在

debounceCloseAlert

方法中使用。它还将创建一个超时，而您不会在任何地方清除该超时

---

\uu.debounce

返回的值包括一个

.cancel（）

方法来清除间隔。所以只需调用

this.debounceCloseAlert.cancel（）组件中的code>将卸载

并将其清除。

您声明您使用了组件willmount，但未使用它。请提供可以复制此问题的。您发布的代码不会导致此错误。谢谢，这是我写的输入错误。代码与提供的完全相同。请提供一种复制问题的方法。在正常情况下，我看不出该组件有可能导致此错误。@estus我刚刚在页面底部为整个组件（在RefillComponent中）发布了一个沙盒链接。我已经让组件和功能运行了一个多月，但在开发过程中偶然发现了这一点。您需要保存沙箱。它目前是空的。我尝试了state方法，但没有效果。我只是用.\u id方法尝试了一下，但它也不起作用，它实际上显示了这个.interval.\u id在我记录它时是未定义的。这是有道理的，但是每当我调用该方法时，我该如何存储返回值呢？我目前在两个不同的函数中调用它。我只是在我的toggle方法中关闭了不必要的去盎司调用。另一篇关于每个组件不使用多个debounce实例的帖子浮现在脑海中。再次感谢加布里埃！我也向你道歉。我没有完全阅读文档。你不需要储存任何东西。

.cancel

位于

解除公告关闭警报

上。因此，您只需添加

这个.debounceCloseAlert.cancel（）组件中的code>将卸载

并完成（并在您想要的任何位置多次调用

解除公告关闭警报

）

  state = {
    selectedDate: "",
    interval: null
  };

  componentDidMount() {
    this.setTodaysDate();
    const interval = setInterval(() => this.setTodaysDate(), 40 * 1000 * 360);
    this.setState({interval});
  }


  componentWillUnmount() {
    clearInterval(this.state.interval);
  }


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


  }

componentWillUnmount() {
  clearInterval(this.interval._id)
}