Electron ipcRenderer无法将ipcMain响应返回给React组件

返回值为undefined和主进程IPC逻辑无关，问题出在两个传递环节：

• preload脚本中暴露给渲染层的getPath、readFile方法，调用ipcRenderer.invoke()后没有返回执行结果。ipcRenderer.invoke是异步API，返回Promise对象，你只在函数内部调用了invoke但没有写return，函数默认返回undefined，值在preload层就丢了。
• React组件侧调用方法时没有处理异步逻辑，就算preload正确返回Promise，同步赋值也拿不到resolve后的实际路径值。

第一步：修改preload.js，补全return #

把ipcRenderer.invoke的结果返回给渲染层，修改后暴露的electron对象代码如下：

contextBridge.exposeInMainWorld('electron', {
    writeFile: (filePath, content) => {
        ipcRenderer.send('write-file', filePath, content);
    },
    getPath: () => {
        // 补全return，将Promise返回给渲染进程
        return ipcRenderer.invoke('get-path');
    },
    readFile: () => {
        // 补全return
        return ipcRenderer.invoke('read-file');
    }
});

第二步：修改React组件调用逻辑，处理异步返回 #

ipcRenderer.invoke是异步方法，需要用async/await或者.then()接收结果，修改组件内的getSavePath方法：

const App = () => {
    // 加async标记函数为异步
    async function getSavePath() {
        // 加await等待Promise resolve，拿到实际路径
        let path = await window.electron.getPath();
        console.log(path); // 此处可正常打印userData路径
    }

    return (
        <div className='App'>
            <Provider store={store}>
                <Section />
                <Note />
                <IconButton iconName={addIcon} classes='IconButton-btn-lg IconButton-bot-left' />
                <IconButton
                    iconName={saveIcon}
                    classes='IconButton-btn-lg IconButton-bot-right'
                    action={getSavePath}
                />
            </Provider>
        </div>
    );
};

• 你当前主进程的write-file用的是ipcMain.on单向通信，回调里的return 0无法传回渲染进程，如果需要感知写文件成功/失败的结果，把它改成和get-path一样的ipcMain.handle模式，配合preload return、渲染层await即可。
• 主进程read-file返回的是Buffer类型，如果要读取JSON内容，需要先转字符串再解析：JSON.parse(data.toString())，直接使用会拿到二进制数据。

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