带React的Socket.io回调

Question

我正在使用带有react的Socket.io回调。但是，有时我会收到此警告

  

警告：无法在已卸载的设备上调用setState（或forceUpdate）   零件。这是空操作，但表示您的内存泄漏   应用。要修复，请取消所有订阅和异步任务   在componentWillUnmount方法中。

从根本上讲，我知道回调可以保存对本地数据的引用，并防止在清除回调之前清除该数据。

不幸的是，Socket.io不适用于Promise，但可以直接回调。这意味着我可能会在组件卸载后得到回调，因为这些回调无法“取消”

我确保服务器响应所有回调以确保它们令人满意，因此不会泄漏内存

我试图通过在this.setState({mounted:true});中调用componentDidMount在this.setState({mounted:false});中调用componentWillUnmount来使该警告“沉默”

然后在我的更新中，只需在socket.io回调中调用if(this.state.mounted)之前先检查this.setState()。

这适用于大多数情况。但是似乎在这种情况下。父组件导致该组件

• componentDidMount
  • 将状态更新为已安装：true
  • 发送请求到socket.io -componentWillUnmount
  • 将状态更新为已安装：false
• componentDidMount
  • 将状态更新为已安装：true
  • 向socket.io发送其他请求
• 来自socket.io的回调响应
  • 警告打印

如何防止这种情况？ sock.io是否有更好的设计模式

Answer 1

基于this到另一个与socket.io相关的问题，我想说，您可能想与服务器断开连接，而不是先检查安装状态，然后基于该调用setState。组件卸载。就像您现在拥有的那样，即使不再安装组件，服务器仍然会响应该事件，但是如果在卸载组件时断开连接，则根本不会从服务器发送任何数据。

注意：我没有亲自尝试过，所以不能肯定地说能行得通，但是基于以上回答，我相信这可以解决您的问题。

Answer 2

我在这里找到了答复：

Is there a way to check if the react component is unmounted?

他们建议使用：

this._ismounted = true;
this._ismounted = false;

而不是调用this.setState（）异步

似乎您应该从文档https://reactjs.org/docs/react-component.html

  

您不应在componentWillUnmount（）中调用setState（），因为永远不会重新渲染该组件。卸载组件实例后，将永远不会再次安装它。