React useEffect 卸载清理问题

Question

所以我有一个组件运行一个带有一些 socket.io 清理功能的 useEffect 函数。

当组件初始化时，它会初始化但会立即运行 socket.disconnect()。理想情况下，它应该只在我离开该页面时断开连接，但现在只需打开带有组件的页面即可初始化套接字并立即关闭连接，从而停止接收进一步广播的网络应用程序。我是 React 的新手，正在尝试获取一个了解为什么组件认为它已卸载但在 DOM?

上清晰可见

在 useEffect 中添加 socket.connect() 也没有解决问题:( 它只是保持断开状态。

useEffect(()=> {
socket.on("abc", (xy)=> "do something")

return socket.disconnect()}, [])

Answer 1

您的效果应该返回一个函数。像这样尝试，

useEffect(() => {
    socket.on("abc", (xy)=> "do something");
    return (() => {
       socket.disconnect()
    })
}, [])

React useEffect 卸载清理问题

React useEffect unmount cleanup issue

socket.io

reactjs