Electron主进程向渲染进程发送数据为空对象问题求助

问题根源 #

核心问题出在preload.js中IPC监听器的实现错误，以及渲染进程对IPC回调参数的处理不当：

• ipcRenderer.on的回调函数第一个参数始终是event对象，第二个才是主进程发送的实际数据
• 你之前的preload直接把渲染进程传入的回调绑定给ipcRenderer.on，导致渲染进程拿到的是event而非发送的数据

修正后的代码 #

1. preload.js #

调整监听器实现，过滤掉event对象，只传递实际数据给渲染进程：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
    storeJSON: (data) => ipcRenderer.send('storeJSON', data),
    // 重命名为onLoadJSON更符合语义，也可保留原名称
    onLoadJSON: (callback) => ipcRenderer.on('loadJSON', (event, data) => callback(data))
})

2. 渲染进程 vsticker.js #

调用修正后的API，此时拿到的就是主进程发送的真实数据：

window.electronAPI.onLoadJSON((data) => {
    console.log(data); // 现在会正确输出"hello"
});

3. 主进程 main.js #

你的主进程代码无需修改，did-finish-load的时机是正确的，确保页面加载完成后再发送数据：

const createMainWindow = () => {
    const win = new BrowserWindow({
        width: 600,
        height: 400,
        webPreferences: {
            nodeIntegration: true,
            preload: path.join(__dirname, "preload.js")
        }
    })
    win.loadFile('index.html')
    win.webContents.openDevTools();
    win.webContents.on('did-finish-load', () =>{
        win.webContents.send('loadJSON', "hello");
    })
};

补充说明 #

如果坚持保留原方法名loadJSON，只需把preload中的对应项改成：

loadJSON: (callback) => ipcRenderer.on('loadJSON', (event, data) => callback(data))

渲染进程依旧用window.electronAPI.loadJSON(...)即可。

内容的提问来源于stack exchange，提问作者kouketsu