1

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

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');
}

上面的代码应该侦听some-event-name由 Electron 的主进程触发的事件，mainWindow.webContents.send('some-event-name');并console.log(...)发出一条表明该事件已处理的消息。

这在效果最初运行时按预期工作。添加了一个侦听器，稍后引发事件，并将字符串'Handled event'打印到控制台。但是当someValueThatChanges变量被分配一个不同的值并且第二次引发事件时，'Handled event' 字符串被打印到控制台两次（旧的侦听器似乎没有被删除）。

当调用包含在 useEffect return/cleanup 函数中时，调用的行listenerCount(eventName)按预期返回 0 。removeListener(...)当removeListener(...)调用被移除时，listenerCount(eventName)调用返回一个按预期递增的值（例如 0、1、2），因为监听器没有被移除。

这是真正奇怪的部分。在任何一种情况下，无论我是否包含对 的调用removeListener(...)，该myEventHandler函数的调用次数总是与运行 useEffect 的次数一样多。换句话说，Electron 报告没有事件侦听器，但myEventHandler似乎仍然被以前的侦听器调用。这是电子中的错误，还是我错过了什么？

4

1 回答 1

0

永远不要尝试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接受单个字符串而不是字符串数组源电子问题，

于 2020-07-01T16:00:03.657 回答