socket.on 听太多答案

【问题标题】：socket.on listen too muchsocket.on 听太多
【发布时间】：2021-05-13 17:30:36
【问题描述】：

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

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 只打印了一次。不知道这里发生了什么，真的需要一些帮助。非常感谢你们！

【问题讨论】：

socket.on(...) 类似于 thing.addEventListener(...)：您应该只定义一次否则您只是为一个事件添加越来越多的侦听器，所有将触发该事件。
什么意思？我只有一次socket.on('finding', () => {})
也许你有，也许你没有：你能展示足够的代码来构成minimal reproducible example吗？很难说出你的代码在当前形式下实际做了什么。

标签： reactjs socket.io react-hooks

【解决方案1】：

就像@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,
    });
};

【讨论】：