Electron主进程向渲染进程传递数据失败问题求助

你遇到的核心问题是：渲染进程调用window.api.sets()时，preload脚本还未收到主进程发送的loaded-sets消息，导致window.loaded_sets尚未被赋值，所以返回undefined。另外代码里还有一个潜在问题：package是JavaScript的保留关键字，用作参数名可能引发意外错误。

下面给出两种可行的修正方案：

方案一：用Promise异步等待数据加载完成 #

这种方式能确保渲染进程只有在数据加载完成后才获取到有效结果，避免同步调用时机不对的问题。

1. 修改preload.js #

// 用Promise缓存加载结果
let setsLoadPromise = new Promise((resolve) => {
  ipcRenderer.on("loaded-sets", (event, directories) => {
    // 直接展开数组，替代冗余的循环赋值
    const loadedSets = [...directories];
    resolve(loadedSets);
  });
});

contextBridge.exposeInMainWorld("api", {
  LoadFiles,
  quit,
  // 暴露获取Promise的方法
  getSets: () => setsLoadPromise,
  sentToRender,
});

2. 修改render.js #

在用户触发开始操作后，通过async/await等待数据加载完成：

// 绑定开始按钮点击事件
document.querySelector("#start-btn").addEventListener("click", async () => {
  // 先触发主进程加载数据（假设LoadFiles是发送"load-sets"事件的函数）
  window.api.LoadFiles();
  // 等待数据加载完成
  const sets = await window.api.getSets();
  console.log(sets); // 此时能正确拿到目录数组
});

方案二：通过自定义事件通知渲染进程 #

这种方式让渲染进程在数据加载完成时被动接收通知，更符合Electron的IPC消息机制。

1. 修改preload.js #

ipcRenderer.on("loaded-sets", (event, directories) => {
  const loadedSets = [...directories];
  // 向渲染进程发送自定义事件，携带数据
  window.dispatchEvent(new CustomEvent("sets-loaded", { detail: loadedSets }));
});

contextBridge.exposeInMainWorld("api", {
  LoadFiles,
  quit,
  sentToRender,
});

2. 修改render.js #

监听自定义事件，在数据到达时处理：

// 监听数据加载完成事件
window.addEventListener("sets-loaded", (e) => {
  console.log(e.detail); // 这里能直接拿到主进程返回的目录数组
});

// 开始按钮点击触发加载
document.querySelector("#start-btn").addEventListener("click", () => {
  window.api.LoadFiles();
});

额外注意事项 #

1. 确保主进程中的folderName是正确的绝对路径，且Electron应用拥有该目录的读取权限
2. 渲染进程必须在调用LoadFiles（即触发主进程的load-sets事件）之后，再尝试获取数据，否则数据还未加载
3. 避免使用package这类JavaScript保留关键字作为变量/参数名，替换为directories这类语义化名称

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