javascript - useState 我做错了什么？

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内钩子(Hook):

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

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

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