Reactjs 听太多了

我在存储中创建了一个套接字（

socket.store.ts

）

在我的组件中使用该套接字。当用户单击“查找”按钮时，套接字向后端发送一次（选中），后端发送一次（选中）返回事件“查找”。但是，

调用了

并在控制台中打印了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,
    });
};

---

但当我在组件内部创建套接字时，

调用

只打印了一次。不知道这里发生了什么，真的需要一些帮助。非常感谢你们

就像@Mike在评论部分说的那样。我需要通过使其生效来防止

socket.on

重新渲染

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

---

socket.on（…）

类似于

thing.addEventListener（…）

：您应该只定义一次，否则您只是为一个事件添加越来越多的侦听器，所有侦听器都将触发该事件。您的意思是什么？我只有一次

socket.on（'finding'，（）=>{}）

也许你有，也许你没有：你能显示足够的代码来组成一个新的套接字吗？很难说您的代码在当前形式下实际做了什么。

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