当将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中的错误,还是我错过了一些东西?
最佳答案
切勿尝试使用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,
关于reactjs - 诡异的 Action : Electron & React useEffect - Unable to unsubscribe from ipcRenderer events,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60158863/