Electron中如何将spawn的stdout结果存入变量供React使用？

主进程处理逻辑 #

把外部命令执行逻辑包装成Promise，通过IPC接收渲染进程的请求，执行完成后将结果回传：

// main.js
const { ipcMain } = require('electron');
const { spawn } = require('child_process');

// 封装执行外部命令的异步函数
function runExternalCommand(command, args) {
  return new Promise((resolve, reject) => {
    const process = spawn(command, args);
    let stdout = '';
    let stderr = '';

    // 收集标准输出
    process.stdout.on('data', (data) => {
      stdout += data.toString();
    });

    // 收集错误输出
    process.stderr.on('data', (data) => {
      stderr += data.toString();
    });

    // 进程结束时处理结果
    process.on('exit', (code) => {
      if (code === 0) {
        resolve({ success: true, output: stdout.trim() });
      } else {
        reject({ success: false, error: stderr.trim(), exitCode: code });
      }
    });

    // 处理进程启动失败
    process.on('error', (err) => {
      reject({ success: false, error: err.message });
    });
  });
}

// 监听渲染进程的IPC请求
ipcMain.handle('run-external-command', async (event, command, args) => {
  try {
    return await runExternalCommand(command, args);
  } catch (err) {
    return err;
  }
});

React渲染进程调用逻辑 #

通过ipcRenderer.invoke发起异步请求，拿到结果后更新组件状态：

// Renderer组件（React）
import { useEffect, useState } from 'react';
const { ipcRenderer } = window.require('electron');

function CommandExecutor() {
  const [commandOutput, setCommandOutput] = useState('');
  const [error, setError] = useState('');

  const executeCommand = async () => {
    try {
      // 替换成你的外部命令和参数
      const result = await ipcRenderer.invoke('run-external-command', 'ls', ['-la']);
      if (result.success) {
        setCommandOutput(result.output);
        setError('');
      } else {
        setError(`执行失败: ${result.error} (退出码: ${result.exitCode || '未知'})`);
        setCommandOutput('');
      }
    } catch (err) {
      setError(`请求失败: ${err.message}`);
      setCommandOutput('');
    }
  };

  return (
    <div>
      <button onClick={executeCommand}>执行外部命令</button>
      {commandOutput && <div><strong>输出结果:</strong><pre>{commandOutput}</pre></div>}
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </div>
  );
}

export default CommandExecutor;

关键说明 #

1. 异步处理核心：spawn是异步操作，不能直接同步返回结果，必须用Promise包裹，等待输出收集完成后再resolve。
2. IPC通信方式：用ipcMain.handle和ipcRenderer.invoke的组合（Electron推荐的现代IPC方式），替代旧版的send/on，天然支持异步返回值。
3. 状态更新：React组件通过useState管理输出和错误状态，异步请求完成后直接更新状态，就能在UI中展示结果。

你之前的函数返回空，是因为函数同步执行完毕时，spawn的stdout还在收集过程中，异步操作还没完成，所以变量没有值。用Promise+IPC.invoke的方式，就能确保拿到完整结果再返回给渲染进程。

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