Question

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

这是我正在使用的代码：

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

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

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

如果我console.log（startData），那么很明显我的代码正在引起无限循环。我在这个论坛上通读了存在类似问题的用户示例，但是针对他们的问题定制他们的解决方案并没有成功。我可以使用setTimeout来管理请求的数量，但是在应用程序运行约2小时后，页面变得无响应（内存泄漏？？？）。

您对我如何改善代码有何建议？

Answer 1

仅在一次上监听套接字，这也是副作用，这两个指标都表明它们应该放在useEffect钩子内：< / p>

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

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

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

Answer 2

实际上就像乔纳斯（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));
       });
    }, []);

这是一个很好的例子：express socket react

useState我在做什么错？

2 个答案: