Electron+React项目如何默认显示指定文件夹路径

你的问题出在：defaultPath只是配置文件选择对话框打开时默认定位的文件夹，并不会自动把这个路径同步到React组件的状态中。页面加载时asset初始值为空，所以显示Nothing selected。要实现默认显示指定路径，需要在组件初始化时主动获取并设置这个路径。

步骤1：在主进程新增获取默认路径的IPC接口 #

修改main.ts，添加一个新的IPC处理函数，用来返回预设的默认文件夹路径：

const os = require('os');

const logUserName = os.userInfo().username;
const defaultFolder = `C:\\Users\\${logUserName}\\Music`

// 原有的选择文件夹接口
ipcMain.handle(IPCChannels.OpenFolder, async () => {
  let result = '';
  await new Promise<void>((resolve) => {
    dialog
      .showOpenDialog({
        properties: ['openDirectory'],
        defaultPath: defaultFolder,
      })
      .then(function (response) {
        result = response.filePaths[0] || ''; // 处理取消选择的情况
        resolve();
      })
  });
  return result;
});

// 新增：获取默认路径的接口
ipcMain.handle(IPCChannels.GetDefaultFolder, () => {
  return defaultFolder;
});

步骤2：修改React组件，初始化时加载默认路径 #

修改OutFolder.tsx，使用useEffect在组件挂载时调用新增的IPC接口，把默认路径设置到状态中，同时优化取消选择时的逻辑：

import { useEffect, useState } from 'react';

export function OutFolder() {
  const [asset, setAsset] = useState('');

  // 组件挂载时获取并设置默认路径
  useEffect(() => {
    window.electron.ipcRenderer
      .invoke(IPCChannels.GetDefaultFolder)
      .then((defaultPath) => {
        setAsset(defaultPath);
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);

  const getPath = () => {
    window.electron.ipcRenderer
      .invoke(IPCChannels.OpenFolder)
      .then((res) => {
        // 仅当用户选择了文件夹时才更新状态，避免取消选择清空路径
        if (res) {
          setAsset(res);
        }
      })
      .catch((err) => {
        console.error(err);
      });
  };

  return (
    <div>
      <div>{asset || 'Nothing selected'}</div>
      <div>
        <button onClick={getPath}>choose folder</button>
      </div>
    </div>
  );
}

补充说明 #

• 新增的GetDefaultFolderIPC接口用来让渲染进程获取主进程中定义的默认路径，避免在渲染进程中重复计算路径（也更安全，因为渲染进程直接访问os模块需要额外配置）。
• 优化了取消选择的逻辑：如果用户打开对话框后点击取消，不会清空已显示的路径（包括默认路径）。

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