Question

摘要

我正在使用React和Electron构建一个桌面应用程序。目的是将文件安装到编码器定义的目录。文件来自亚马逊S3。我正在使用Material UI Framework作为加载栏，并使用SnackBar弹出窗口来显示用户成功。要下载，我正在使用以下库：https://github.com/tytech3/node-s3-client

使用该库可以显示传入的字节值和所需的总字节值，因此可以在进度条中指定一个百分比。

问题

我正在使用事件ipcMain和ipcRenderer传递此信息。 Main.js（与操作系统一起播放的文件）：

 ipcMain.once('downloadDir', (event, arg) => {

  var percentage = 10;

  ipcMain.on('downloaderPercentage', (event, arg) => {
    event.reply('downloadPercentage', percentage);
    percentage += 10;
    console.log("Main % val: " + percentage);
  })

  ipcMain.on('clear', (event, arg) => {
    percentage = 0;
  })

})

和Test.js（我的React组件）：

  installFiles = (version)  => {
    this.openSnack = false;
    console.log(version);

    this.setState({currentDownload: "Downloading File: " + version, downloading: true})
    ipcRenderer.send('downloadDir', version);
    ipcRenderer.send("downloaderPercentage")

    var that = this;

    ipcRenderer.on('downloadPercentage', (event, arg) => {
          console.log("Testpage %: " + arg);
          that.percentage = arg
          setTimeout(function(){
            if(isMounted && (arg < 100)) {
              ipcRenderer.send("downloaderPercentage")
              that.setState({percentage: arg});
          }
           else{
            console.log("else statement")
            that.resultMessage = 'Installation Successful'
            that.openSnack = true;
            that.setState({currentDownload: '', percentage: 100})
            ipcRenderer.send('clear');
      }}, 500)
      })
    }

我渲染了多个具有安装按钮的卡，这些安装按钮均使用上述功能'installFiles'。正如我所设计的那样，第一个按钮的工作方式非常漂亮。但是，如果您添加带有另一个按钮的另一张卡，它将多次运行ipcRenderer事件，并且将击中结尾的else语句12次。如果添加另一个，数字将增加。我试图弄乱删除事件监听器，但这不起作用。

TLDR 有人知道为什么一旦再次调用我的事件监听器就会被击中那么多次吗？

Answer 1

最终弄清楚了。事件侦听器从未删除。添加了2行（请参阅以+开头的行）以删除侦听器。我相信ipcRenderer.on实际上会创建一个新的侦听器，这就是为什么我越来越多的原因。

    ipcRenderer.on('downloadPercentage', (event, arg) => {
      console.log("Testpage %: " + arg);
      that.percentage = arg
      setTimeout(function(){
        if(isMounted && (arg < 100)) {
          ipcRenderer.send("downloaderPercentage")
          that.setState({percentage: arg});
      }
       else{
        console.log("else statement")
        that.resultMessage = 'Installation Successful'
        that.openSnack = true;
        that.setState({currentDownload: '', percentage: 100})
        ipcRenderer.send('clear');
       + ipcRenderer.removeAllListeners('downloadPercentage');
       + ipcRenderer.removeAllListeners('downloaderPercentage');

  }}, 500)
  })
  this.setState({currentDownload: "Installing File: " + version})
}

为什么我的活动被这么多次调用？ [反应+电子]

1 个答案: