Electron+React+TypeScript环境下主进程向React组件传递数据返回undefined问题及解决方法

这个问题的核心在于你没处理IPC通信的异步特性——ipcRenderer.send只是发送请求，不会同步返回主进程的回复，而且你的preload.ts里的getData函数也没有处理主进程的响应逻辑，所以调用它才会输出undefined。咱们一步步来修正：

1. 修正Preload脚本，处理异步响应 #

首先修改preload.ts，把getData包装成Promise，让它能等待主进程的回复：

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electron', {
  getData: (channel: 'get-data') => {
    return new Promise<string>((resolve) => {
      // 用once监听单次回复，避免重复绑定导致内存泄漏
      ipcRenderer.once(channel, (_event, data) => {
        resolve(data);
      });
      // 向主进程发送请求
      ipcRenderer.send(channel);
    });
  },
});

2. 在React组件中异步获取数据 #

因为getData现在返回Promise，你需要在React组件里用async/await配合useEffect来处理异步逻辑：

import { useEffect, useState } from 'react';

const Hello = () => {
  const [mainProcessData, setMainProcessData] = useState<string | null>(null);

  useEffect(() => {
    const fetchMainProcessData = async () => {
      try {
        // 等待主进程返回数据
        const result = await window.electron.getData('get-data');
        console.log('从主进程拿到的数据:', result);
        setMainProcessData(result);
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    };

    fetchMainProcessData();
  }, []);

  return (
    <div>
      {mainProcessData ? (
        <p>主进程传递的数据：{mainProcessData}</p>
      ) : (
        <p>正在加载数据...</p>
      )}
    </div>
  );
};

export default Hello;

关键说明 #

• 为什么之前返回undefined？因为你的原始getData函数没有返回值，且ipcRenderer.send是异步操作，不会同步返回主进程的响应。
• 用ipcRenderer.once而不是on：确保每次请求只监听一次回复，避免多次调用getData时绑定多个重复的监听事件，造成内存泄漏。
• React中必须用useEffect执行异步操作：直接在组件函数体里调用异步函数会导致重复执行，useEffect配合空依赖数组可以确保只在组件挂载时执行一次。

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