javascript - React 路由器 - setState(...) : Can only update a mounted or mounting component

Question

我有一个使用 React Router 的应用程序。该应用程序有一些不断更新的组件(它是实时分析数据的仪表板)。我在使用 <Link> 时遇到以下错误链接仪表板的各个部分:

warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Logins component.

这是我的代码:

App.js:

<BrowserRouter>
    <Main />    
</BrowserRouter>

Main.js:

<Sidenav />
<Switch>
    <Route exact path='/site-feedback' component={Sitefeedback}/>
    <Route exact path='/logins' component={Logins}/>
    <Route exact path='/shop-sales' component={Shopsales}/>
</Switch>

Sidenav.js:

<Link to='/site-feedback'>Site Feedback</Link>
<Link to="/logins">Logins</Link>
<Link to="/shop-sales">Shop Sales</Link>

如果我替换 <links>只需使用普通的 a 标签，当整个应用程序再次加载时，问题就会消失，但我理想情况下希望不必重新加载其中的其他组件，例如 header 或 sidenav 。

有人知道解决这个问题的好方法吗？我无法想象我是唯一一个在 React Router 上遇到这个问题的人......

谢谢

Answer 1

您的组件之一很可能设置间隔或订阅外部事件。您需要取消订阅所有事件并清除 componentWillUnmount 中的所有超时/间隔，它应该如下所示:

class SomeComponent extends Component {
  componentDidMount() {
    this.timeoutId = setInterval(...)
    subscribeToSomeEvent(...)
  }
  componentWillUnmount() {
    clearInterval(this.timeoutId)
    unsubscribeFromSomeEvent(...)
  }
}

您可能收到该消息的另一个原因是，当用户更改页面(从而卸载当前组件)时，同时某些 ajax 请求正在进行中，并且一旦请求完成，它就会尝试更新已卸载的组件。您可以设置一些标志来避免这些后期更新:

class SomeComponent extends Component {
  componentDidMount() {
    fetch(...).then(data => {
      if (this.unmounted) return
      // process the data
    })
  }
  componentWillUnmount() {
    this.unmounted = true
  }
}