Socket.io 为一个事件多次返回

Question

在将其标记为重复之前，我检查了大多数其他帖子和解决方案，但无济于事。如果有人想仔细检查，这里是：

1) Socket.io Multiple returns for a single event 2) Socket.io message event firing multiple times
3)socket.on event gets triggered multiple times

还有很多其他的。

现在开始讨论我的问题！

我的客户端和服务器代码中有一个套接字。一旦我的服务器端套接字发出消息，它就会被客户端套接字接收并打印出消息。通过研究，这可能与事件侦听器有关，但我不知道如何将它应用到我的代码中。仅供参考，单击按钮时会运行以下客户端代码。

这是我的客户端代码的 sn-ps

onButtonClick() {
     socket.emit('message_to_server', 'ping');

     socket.on('reply', (tmp) => {
          console.log(tmp); // in this case, call it 'pong'
          this.doSomethingWithMe(tmp);
     });
}

doSomethingWithMe(msg) {
// do something with the information
}

第一次点击按钮，我收到了

> pong

第二次点击按钮，我收到了

> pong
> pong

它继续呈指数增长。

如果需要，我可以发布我的服务器代码，但我 100% 确信它会正确发出信息。

有人有解决这个问题的想法吗？我无法弄清楚听众是如何参与这种情况的，所以我会很感激任何建议！

编辑：我将我的一些代码更改为以下内容：

import React ...

const socket = socketIOClient('http://localhost:3000')

socket.on('reply', (tmp) => {
     console.log(tmp); // in this case, call it 'pong'
     var inst = new drawMe();
     inst.doSomethingWithMe(tmp);     
});

class drawMe extends Component {
     constructor(props) { this.state = { allData: ''}}

     onButtonClick() {
          ...
     }

     doSomethingWithMe(data) {
          this.setState({ allData: data });
     }

我现在收到一条错误消息，提示您无法在尚未安装的组件上调用 setState。我可能不会为这个问题提出另一个问题，但我会很感激任何关于它的建议。如果模组/任何人想要我关闭，我这样做没有问题。

EDIT2：如果其他人有这个问题，我通过移动代码来实例化套接字和构造函数中的事件来使它工作。

Answer 1

每次单击按钮时，您都会再次附加事件处理程序。您在点击处理程序中有socket.on；该方法附加一个新的处理程序——也就是说，每次运行时，它都会将指定的函数添加到事件触发时要运行的函数列表的末尾。所以是的，每次单击按钮时，您都会将该功能添加到列表的末尾，并且每次添加它都会运行一次。 （更准确地说，由于您在那里使用匿名函数，因此每次单击按钮时它都会创建一个新函数，并将其添加到事件处理程序列表中以在事件触发时运行。）

您应该只附加一次事件处理程序，例如在创建套接字之后，而不是在每次点击时。