reactjs - 诡异的 Action : Electron & React useEffect - Unable to unsubscribe from ipcRenderer events

Question

当将Electron的ipcRenderer与React的useEffect一起使用时，我遇到了奇怪的行为。
在我的 Electron 应用程序中，我有以下代码:

import React, { useEffect } from 'react'
const electron = window.require('electron');
const ipcRenderer = electron.ipcRenderer;

...

const someValueThatChanges = props.someValue;

useEffect(() => {
  const myEventName = 'some-event-name';
  console.log(`Using effect. There are currently ${ipcRenderer.listenerCount(eventName)} listeners.`);
  console.log(`Value that has changed: ${someValueThatChanges}.`);
  ipcRenderer.addListener(myEventName, myEventHandler);
  console.log('Added a new listener.');
  // Should clean up the effect (remove the listener) when the effect is called again.
  return () => {
    ipcRenderer.removeListener(myEventName, myEventHandler)
    console.log('Cleaned up event handler.');
  }
}, [ someValueThatChanges ]);

function myEventHandler() {
  console.log('Handled event');
}

上面的代码应该监听用Electron的主进程触发的 some-event-name事件，其中 mainWindow.webContents.send('some-event-name');和 console.log(...)消息表明已处理该事件。

最初运行效果时，此效果可以预期。添加了一个监听器，此事件在以后引发，并将字符串 'Handled event'打印到控制台。但是，当给 someValueThatChanges变量分配了一个不同的值，并且第二次引发该事件时，“Handled event”字符串将被打印到控制台两次(旧的监听器似乎没有被删除)。

当 listenerCount(eventName)调用包含在useEffect返回/清除函数中时，带有 removeListener(...)调用的行将按预期返回0。删除 removeListener(...)调用后，由于未删除监听器，因此 listenerCount(eventName)调用返回的值会按预期递增(例如0、1、2)。

这是真正奇怪的部分。无论哪种情况，无论我是否包括对 removeListener(...)的调用， myEventHandler函数始终被调用与useEffect运行相同的次数。换句话说，Electron报告没有事件监听器，但是以前的监听器似乎仍在调用 myEventHandler。这是Electron中的错误，还是我错过了一些东西？

Answer 1

切勿尝试使用ipcRenderer.addListener，而应尝试使用ipcRenderer.on

useEffect(() => {
  ipcRenderer.send('send-command', 'ping');

  ipcRenderer.on('get-command', (event, data) => {
    console.log('data', data);
  });

  return () => {
    ipcRenderer.removeAllListeners('get-command');
  };
}, []);

我相信，文档已更改。 ipcRenderer.removeAllListeners接受单个字符串，而不是字符串数组来源 electron issues，