时间戳

首页 > 解决方案 > socket.on 听太多

reactjs - socket.on 听太多

问题描述

socket.store.ts我在 store ( )中创建了一个套接字

constructor() {
    this.socket = io.connect(process.env.REACT_APP_SOCKET_URI || '3131');
}

在我的组件中使用该套接字。当用户单击查找按钮时，套接字向后端发出一次（选中），后端发出一次（选中）回事件“查找”。但是called当我重新单击查找按钮时，打印到控制台 12 次甚至迅速增加

const socketStore = useContext(SocketStoreContext);
const socket = socketStore.socket;

// THOUGHT: maybe i will try to create socket inside this component
// const socket = io.connect(process.env.REACT_APP_SOCKET_URI);

socket.on('finding', () => {
    console.log('called');
});

const handleFindPartner = () => {
    socket.emit('find', {
      token: user.token,
    });
};

但是当我在我的组件中创建套接字时，called只打印了一次。不知道这里发生了什么，真的需要一些帮助。非常感谢你们！

标签： reactjssocket.ioreact-hooks

解决方案

就像@Mike 在评论部分所说的那样。我需要socket.on通过将其放入 useEffect 来防止重新渲染

const socketStore = useContext(SocketStoreContext);
const socket = socketStore.socket;

// THOUGHT: maybe i will try to create socket inside this component
// const socket = io.connect(process.env.REACT_APP_SOCKET_URI);

React.useEffect(()=>{
   socket.on('finding', () => {
       console.log('called');
   });
},[socket])

const handleFindPartner = () => {
    socket.emit('find', {
      token: user.token,
    });
};

推荐阅读