Question

我发现了此错误：

无法在已卸载的组件上调用setState（或forceUpdate）。这是空操作，但它表明应用程序中发生内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

上下文：当我连接时，我在主页上，该页面上不包含面包屑，但是如果我继续CampaignPage（也是组件的名称），我就会得到{{1 }}（组件名称）我发现此错误。

在其他我能看到的帖子上，他们说可能是在BreadCrumb上异步出现的问题，但我认为我的问题有所不同，我找不到解决方案。

我的代码如下：

ComponentWillMount

Answer 1

您正在执行异步操作（loadEntityNameById），该操作将在组件完成时设置其状态。到那时，您的Breadcrumbs组件可能已经卸载，并且引发了错误。

Answer 2

无法在已卸载的组件上调用setState（或forceUpdate）。这是空操作，但它表明应用程序中发生内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

此错误消息明确指出您的应用程序存在内存泄漏。到底是怎么回事？

好吧，您正在setBreadcrumbs方法中使用异步操作（loadEntityNameById）。在componentWillMount和componentWillReceiveProps中被调用。这意味着当您从CampaignPage组件转到BreadCrumb组件时，它将执行异步操作，即。 loadEntityNameById在后台运行，仅在完成后设置状态。但是在那之前，您的BreadCrumb组件可能尚未卸载。 react应用程序不允许您更新未安装组件的状态。

此外，您根本不应使用componentWillMount方法。改用componentDidMount钩子。

要解决此问题，您可以设置一个标志，例如：

componentDidMount() {
  // component is mounted, set the didMount property on BreadCrumb component
  // you can use any name instead of didMount what you think is proper
  this.didMount = true
  // now, you can update the state
  if(this.didMount) { // be sure it's not unmounted
    this.setState({names: ...})
  }

下一步，在卸载组件时，应清除didMount属性。

componentWillUnmount() {
  this.didMount = false // component is unmounted

这将确保您不会泄漏应用程序内存。因为，我们在需要时正确设置了状态，而在不需要时则设置了状态，并停止了不必要的循环。

Answer 3

您不能在setState中呼叫componentWillMount，而尝试使用componentDidMount

使用ComponentDidMount（）时，我发现此错误：无法调用setState

3 个答案: