无法在socket.io回调React.js中调用setState

Question

我面临以下问题：

在处理状态的React组件内部，有一个与socket.io的websocket连接。每当我收到一些事件时，都应该执行一些操作并更新组件的状态。例：

socket.on('some event', () => {
 this.aMethod() // this method calls setState()
})

问题是出现以下消息：

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.

但是我没有componentWillUnmount在任何地方使用方法。并且该组件未卸载。

如果我更换aMethod与this.props.aMethod()和更新，将工作父组件的状态（存在amethod方法在这两个组件）。问题在于该组件非常庞大，因为它是一个容器，将所有状态移至父级，使用props会导致大量重写。

这使我想到了该应用程序的反应路线可能存在一些问题。

父组件具有以下路由（从概念上讲）：

 <Switch>

          <Route exact path={'/user/:id'} render={(props) => <User />} />
          <Route exact path={'/users'} render={(props) => <User />} />

  </Switch>

我之所以使用render而不是component因为我需要传递一些方法作为道具。React和react-router-dom是16.x和5.0.0的最新版本。

是否有可能以某种方式做出反应，先冻结组件的第一个实例，然后更改URL，而我现在无法再更新状态？如果我在console.log内显示一条消息，componentWillUnmount()则看不到它正在卸载。

任何想法将不胜感激！

随意问的问题。

Answer 1

React告诉您必须删除componentWillUnmount中的侦听器：

componentWillUnmount() {
 socket.off('some event');
}

这是由于以下事实：

• 如果在componentDidMount中添加侦听器，则最终将有多个侦听器
• 当组件被卸载时（在路线更改时）“ this”和它的上下文绑定不再有意义，但是每次事件发生时，回调都会尝试设置状态

表单反应文档：

在卸载和销毁组件之前，将立即调用componentWillUnmount（）。使用此方法执行任何必要的清除，例如使计时器无效，取消网络请求或清除 在componentDidMount（）中创建的所有订阅。

参考：https : //reactjs.org/docs/react-component.html? utm_source = caibaojian.com# componentwillunmount

另一个可以更好地理解该问题的资源：

https://advancedweb.hu/2016/01/05/global-listener-patterns-in-react/