在电子反应应用程序中多次触发 NodeJS 事件答案

【问题标题】：NodeJS events triggering multiple times in electron-react app在电子反应应用程序中多次触发 NodeJS 事件
【发布时间】：2020-06-19 19:53:08
【问题描述】：

我有一个包（比方说PACKAGE_A）来完成一些任务。然后PACKAGE_B 需要它。 PACKAGE_A 是用于一些自动化工作的节点脚本。它有这个 Notifier 模块来创建和导出 EventEmitter。（整个项目是一个 Monorepo）

const EventEmitter = require('events');

let myNotifier = new EventEmitter();

module.exports = myNotifier;

所以在PACKAGE_A 的某些函数中，它通过要求myNotifier 发出事件，并且在PACKAGE_A 的index.js 中，我导出函数（API 暴露给其他包）和myNotifier 通过要求再说一遍。

const myNotifier = require('./myNotifier);

const func1 = () => {
    // some function
    return something;
}

module.exports = {func1, myNotifier}

然后我将PACKAGE_A 导入PACKAGE_B 并使用通知程序公开的API 函数。 PACKAGE_B 是一个带有 React UI 的电子应用程序。

以下是该程序的工作原理。

我在电子应用中有一个控制台输出窗口（React UI，UI_A）。

当我点击 UI_A 中的按钮时，它会触发 redux 操作 (button_action)。在动作内部，会向使用 ipcRenderer 在电子代码中侦听的事件发送通知。

ipcRenderer.send('button-clicked', data); // <= this is not the full code of the action. It's bellow.

然后在电子代码（index.js）中，我需要另一个文件（UI_A_COM.js，其中包含电子端与 UI_A 相关的代码）。原因是代码分离。这是index.js中与电子相关的部分代码。

const ui_a_com = require('./electron/UI_A_COM');

const createWindow = () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
        },
        resizable: false,
    });
    mainWindow.loadURL('http://localhost:3000');
    const mainMenu = Menu.buildFromTemplate(menuTemplate);
    ui_a_com (mainWindow);
};

好的。然后在UI_A_COM.js，我监听那个触发事件button-clicked。

ipcMain.on('按钮点击', someFunction);

从PACKAGE_A 运行代码并返回结果。所以现在当PACKAGE_A 运行时，它会使用myNotifier 发出一些事件。我在同一个文件 (UI_A_COM.js) 中收听它们，当这些事件被捕获时，我再次将一些事件发送到 React UI，当button_action 触发时订阅。

myNotifier.on('pac_a_event_a', msg => {
    mainWindow.webContents.send('ui_event_a', msg); // code in `UI_A_COM.js`
});

这是该操作的完整代码。（之前没有提供，因为你会感到困惑）

export const buttonAction = runs => {
    return dispatch => {
        ipcRenderer.send('button-clicked', data);

        ipcRenderer.on('ui_event_a', (event, msg) => {
            dispatch({ type: SOME_TYPE, payload: { type: msg } });
        });

    };
};

这将在 UI_A 控制台中显示消息。

这就是我正在做的任务。问题是当我单击按钮时；它第一次完美运行。但是当我第二次单击该按钮时，它收到了两条消息。然后，当我再次单击该按钮时，会出现三条消息，并且它一直在增长。（但 PACKAGE_A 中的函数每按一次按钮只执行一次）。

假设每次执行时来自PACKAGE_A 的消息是“Hello there”。

当我第一次按下按钮时，一个完美的结果 => 你好，当我再次点击按钮时 => 你好，你好，当我再次点击它时 => 你好，你好，你好。

一直如此。我认为我的 EventEmitter 实现有一些流程。那么为什么会这样呢？是 EventEmitter 还是别的什么？我在这里做错了什么？

【问题讨论】：

标签： javascript node.js reactjs events electron

【解决方案1】：

我认为您应该在组件的useEffect() 中返回一个调用ipcRenderer.removeAllListeners() 的函数。因为每次单击自定义按钮时，都会调用 ipcRenderer.on(channel, listener)，因此您为该频道设置了一个监听器 agin 和 agin...

例子：

  useEffect(() => {
    electron.ipcRenderer.on('myChannel', (event, arg) => {
      dispatch({ type: arg });
    });
    return () => {
      electron.ipcRenderer.removeAllListeners('myChannel');
    };
  });

【讨论】：