Javascript 请说明我做错了什么？

我正在创建一个应用程序，读取几个麋鹿警报系统的警报状态。我正在使用useState处理通过socket.io从服务器接收的数据。服务器正在传输的数据是一个数组数组

这是我正在使用的代码：

const [startData, updateData] = React.useState([]);

  const socket = io("http://localhost:5000");

  socket.on('data', (dta) => {
    updateData(dta.data);
  });

如果我使用console.logstartData，那么很明显我的代码导致了一个无限循环。我通读了这个论坛中有类似问题的用户的例子，但我没有成功地为他们量身定制解决方案来解决我的问题。我可以用setTimeout来管理请求的数量，但在应用程序运行大约2小时后，页面会出现无响应的内存泄漏

---

你们对我如何改进代码有什么建议吗？

监听套接字应该只发生一次，这也是一种副作用，这两种情况都表明这些应该在useEffect挂钩中：

---

与函数体不同，函数体将在每个重新渲染器上运行，效果挂钩将仅在特定状态更改时运行，或者在这种情况下仅运行一次。

侦听套接字只应发生一次，这也是一种副作用，这两个都是指示这些应在useEffect挂钩内的指示器：

---

与函数体不同，函数体将在每个重新渲染器上运行，效果挂钩将仅在特定状态更改时运行，或者在本例中仅运行一次。

实际上正如Jonas所说，您应该调用套接字一次：

import socketIOClient from "socket.io-client"; 

const [startData, updateData] = React.useState([]);
  const endpoint= "http://localhost:5000";
  useEffect(() => {

       //Very simply connect to the socket
       const socket = socketIOClient(endpoint);

       //Listen for data on the "outgoing data" 
       socket.on("outgoing data", (dta)=>updateData(dta.data));
       });
    }, []);

---

这是一个很好的例子：

实际上正如Jonas所说，您应该调用socket一次：

import socketIOClient from "socket.io-client"; 

const [startData, updateData] = React.useState([]);
  const endpoint= "http://localhost:5000";
  useEffect(() => {

       //Very simply connect to the socket
       const socket = socketIOClient(endpoint);

       //Listen for data on the "outgoing data" 
       socket.on("outgoing data", (dta)=>updateData(dta.data));
       });
    }, []);

---

这是一个很好的例子：

谢谢！我尝试了这个解决方案，它考虑了无限循环。但当我实现它时，当我启用/解除报警系统时报警状态发生变化时，我的报警指示灯不会重新呈现。我使用引导标记来显示基础报警系统是否已启用或解除。我的express服务器上有一个事件发射器，用于将报警状态更改流式传输到客户端。我怎样才能更改useEffect挂钩，以便它注册正在流式传输的任何事件更改？谢谢！我尝试了这个解决方案，它考虑了无限循环。但当我实现它时，当我启用/解除报警系统时报警状态发生变化时，我的报警指示灯不会重新呈现。我使用引导标记来显示基础报警系统是否已启用或解除。我的express服务器上有一个事件发射器，用于将报警状态更改流式传输到客户端。如何更改useEffect挂钩，使其注册正在流式传输的任何事件更改？您应该在useEffect挂钩中放置socket.on您应该在useEffect挂钩中放置socket.on谢谢您的回答，如上面的示例所示，当我实现这个解决方案时，我的客户机不再监听来自服务器的alarmstate更改。如果我启用/解除报警系统，客户端将不再作出反应。如果我将我的解决方案与setTimeout一起使用，那么如果我防护/解除防护系统，我的客户端将正确显示它，但应用程序的性能会逐渐变差，直到它没有响应。请参阅本文感谢您的响应，如上面的示例所示，当我实现这个解决方案时，我的客户机不再监听来自服务器的alarmstate更改。如果我启用/解除报警系统，客户端将不再作出反应。如果我将我的解决方案与setTimeout一起使用，那么如果我防护/解除防护系统，我的客户端将正确显示它，但应用程序的性能正在逐渐恶化，直到它变得无响应。请参阅本文