Electron-React：MaxListenersExceededWarning：检测到可能的 EventEmitter 内存泄漏。 21 个 updateDeviceList 监听器添加到 [EventEmitter]答案

【问题标题】：Electron-React: MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 21 updateDeviceList listeners added to [EventEmitter]Electron-React：MaxListenersExceededWarning：检测到可能的 EventEmitter 内存泄漏。 21 个 updateDeviceList 监听器添加到 [EventEmitter]
【发布时间】：2022-10-21 18:53:49
【问题描述】：

我试着到处搜索以了解其原因，我想我有绳子的尖端，我使用 USB 检测来检测 USB 设备何时连接，

usbDetect.on('add', () => sendDeviceListToGUI(1));

在此功能中，我执行以下操作

const sendDeviceListToGUI= async (status: number) => {
  mainWindow?.webContents.send('updatingDeviceList', status);
  const list = await getConnectedDeviceArray();
  mainWindow?.webContents.send('updateDeviceList', list);
};

我假设只要连接或断开设备，事件就会堆积起来，

(node:41276) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 21 updateDeviceList listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit
(Use `TestApp --trace-warnings ...` to show where the warning was created)
(node:41276) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 21 updatingDeviceList listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit

我尝试增加限制但没有运气，我觉得我需要像承诺一样解决事件。

（也是 --trace-warnings ... 不知道为什么）

【问题讨论】：

标签： javascript node.js reactjs typescript electron

【解决方案1】：

我发现了问题，我的反应文件中有这个调用，因为我每次重新渲染组件时都使用功能组件，它会注册一个新的侦听器。

window.myapiAPI.updateDeviceList()

我认为有一个选项可以用钩子解决它，并确保钩子运行一次。但是现在在我的预加载文件中，我在分配新的侦听器之前删除了所有侦听器。

ipcRenderer.removeAllListeners('updateDeviceList');

更新 2

我将所有函数包装在第一次渲染时运行的 useEffect 挂钩中。

useEffect(() => {
    window.myAPI.message((message: string) => {
      AppToaster.show({
        message,
        intent: Intent.WARNING,
      });
    });
  }, []);

【讨论】：

我认为你应该结合2个解决方案。首先，仅在需要时调用 add listener。当它完成他的任务时删除。常见的方式是组件挂载时监听，组件卸载时处理

【解决方案2】：

您可以使用 useEffect 挂钩注册 ipc 侦听器，无需依赖即可使其运行一次。按照 Hồng Phúc 的建议，在卸载组件时使用 useEffect cleanup 函数再次删除侦听器。

使用您的示例：

useEffect(() => {
  window.myAPI.message((message: string) => {
    AppToaster.show({
      message,
      intent: Intent.WARNING,
    });
  });
  return function cleanup() {
    ipcRenderer.removeAllListeners('updateDeviceList');
  }
}, []);

【讨论】：