在 useEffect 中对 Socket.io 的第一个请求做出反应

Posted 2023-02-21

【中文标题】在 useEffect 中对 Socket.io 的第一个请求做出反应

【英文标题】：React with Socket.io first request in useEffect

【发布时间】：2021-12-26 01:43:16

【问题描述】：

我在react 应用程序中使用Socket.io。我想在应用加载后立即发出第一个请求，所以我将我的第一个 emit 放入 useEffect 钩子中：

useEffect(() => 
    socket.emit("getCollectionsAndVolumes", socket.id);
  , []);

但它不起作用。它不做任何请求。所以我意识到一个问题是因为可能还没有连接套接字所以我放了一点timeout like：

useEffect(() => 
    const initialGetTimeout = setTimeout(() => 
      clearTimeout(initialGetTimeout);
    , 1000);
  )

它有效，但这只是一种解决方法，我应该如何在应用加载后立即触发第一个请求？ React 有没有其他方法可以做到这一点？

【参考方案1】：

添加一个在连接套接字时更改的参数作为useEffect React.useEffect(()=>,[dependencies]);的依赖项，如果没有这样的参数，则尝试创建一个保持套接字连接与否的状态。

【讨论】：

我只想做一次，如果我要传递一个参数，它会在每次改变时执行它，我不知道我应该在依赖数组中放入哪个参数

创建一个在套接字连接成功时只会改变一次的状态，比如最初将值设置为 false，一旦套接字连接，将其设置为 true，然后不再更改值，即为 setstate 添加条件, 如果状态的值为真，则不要改变

是的，但我不知道如何检查套接字是否已连接

这意味着代码不知道套接字何时连接或它是否已连接？如果是这样，那么你就没有什么可以基于它来执行 'socket.emit("getCollectionsAndVolumes", socket.id);'

【参考方案2】：

我使用以下方法解决了这个问题：

socket.on("connect", () => 
  socket.emit("getCollectionsAndVolumes", socket.id);
);

所以当它是true 时它会立即执行请求