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

在这被标记为重复之前，我已经检查了大多数其他帖子和解决方案，但没有结果。如果有人想再次检查，请查看：

(一) 2）
(三)

还有很多其他的

现在进入我问题的核心

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

以下是我的客户机代码片段

第一次单击按钮时，我收到

> 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

。对于这个问题，我可能不会再提出另一个问题，但我希望得到任何建议。如果mods/任何人希望我关闭，我这样做没有问题

---

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

每次单击按钮时，都会再次附加事件处理程序。您有

socket.on

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

---

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

感谢您的快速回复！因此，这是有意义的，但要澄清一下：我会在（'reply'，（tmp）=>{…}的正下方编写

socket.on（
const-socket=socketIOClient（'localhost'）
？我的，应该可以正常工作：）只要您只运行一次
处理程序附件代码上的
套接字，它就会像您期望的那样工作。（我还注意到您在处理程序函数定义之后缺少了结束
）
，因此我很惊讶代码没有崩溃：P）我现在一定要尝试。在我当前的实现中，我的服务器发出“pong”消息x（未知）次。您认为套接字会读取我的服务器发出的所有信息吗？会附加一个事件处理程序，以便在事件触发时随时运行。如果服务器触发事件23次，处理程序函数将运行23次，与接收事件的顺序完全一致。因此，是的，它可以工作！但是，当我调用
doSomethingWithMe（data）
时，它超出了范围，因为我的套接字实例化完全在我的类之上。我知道这不是最初的问题，但你有什么想法来解决这个问题吗？
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 });
     }