Sockets next.js socket.io useeffect未更新套接字消息
我在next.js上的套接字客户端遇到问题。我已经为应用程序中的所有组件创建了一个提供套接字实例的上下文,问题是,当我想在组件上使用套接字上下文时,我正在使用useeffect钩子,一旦套接字被更改,就会调用它,我将处理消息调用(就像我在web上看到的任何教程一样)但是在套接字上有新消息时,根本不会调用useeffect。对于那些可能认为这是上下文问题的人,我应该说它不是。我已经在组件itslef上测试了套接字初始化,但仍然没有调用useeffect。Sockets next.js socket.io useeffect未更新套接字消息,sockets,socket.io,react-hooks,next.js,react-context,Sockets,Socket.io,React Hooks,Next.js,React Context,我在next.js上的套接字客户端遇到问题。我已经为应用程序中的所有组件创建了一个提供套接字实例的上下文,问题是,当我想在组件上使用套接字上下文时,我正在使用useeffect钩子,一旦套接字被更改,就会调用它,我将处理消息调用(就像我在web上看到的任何教程一样)但是在套接字上有新消息时,根本不会调用useeffect。对于那些可能认为这是上下文问题的人,我应该说它不是。我已经在组件itslef上测试了套接字初始化,但仍然没有调用useeffect。 下面是im使用套接字实例的方法: expo
下面是im使用套接字实例的方法:
export default function MyComp(props){
const cookies = new Cookies()
const token = cookies.get('token');
const socket = io(routes.socket_url, { path: '/socket',
transports: ['websocket'],
query:{
token,
user_id:'someuserid'
}
});
useEffect(() => {
console.log('socket changed');
console.log(socket);
console.log('socket changed');
},[socket])
}
实际上,我可以在devtools上看到连接,也可以在network选项卡上看到消息,因此这意味着我们有一个连接(也在服务器上检查过),但console.log()部分在新消息上从未调用过
这是我使用上下文的组件
export default function MyComp(props){
const socket = useContext(SocketContext);
useEffect(() => {
console.log('socket changed');
console.log(socket);
console.log('socket changed');
},[socket])
}
这个连接在devtools中也可用,它会在networks选项卡上获得新消息,但在useffect中从未调用日志记录
谢谢你们的帮助。伙计们,我找到了答案。我当时正在使用socket.io-client v3.1.1,并开始测试其他版本。出于某种奇怪的原因
在版本3中,套接字实例没有接收任何消息,尽管连接已经建立,我可以在网络选项卡中看到消息。
无论如何,我将版本从3改为2.1.1,它的工作方式很有魅力。在
useffect
调用中的第二个参数是依赖项数组。尝试将其更改为[socket]
。谢谢。其实是我的错。useffect仍然没有按预期工作。不确定套接字实现是否正确,可能值得一看。