Electron React：如何在App组件渲染前获取本地JSON配置数据

问题背景 #

在Electron+React+Node项目中，public目录下的app-config.json需同时供服务端server.js和前端App.js使用。服务端已成功读取配置，但前端App.js中通过fetch获取配置后，Socket.io连接因配置变量未初始化（undefined）失效，需要实现App组件仅在配置加载完成后再渲染及初始化Socket.io。

核心问题分析 #

原App.js代码中，fetch是异步操作，而Socket.io连接在组件外部同步创建，此时AppConfig的静态属性尚未被赋值，导致连接URL拼接为http://undefined:undefined，最终连接失败。

解决方案 #

利用React的状态管理与生命周期钩子，将配置加载逻辑放到App组件内部，等待配置加载完成后再初始化Socket.io并渲染组件内容。

方案1：基于fetch的前端加载（通用Web场景） #

修改App.js，通过useState管理配置与加载状态，useEffect执行异步加载，useMemo缓存Socket.io连接避免重复创建：

import React, { useState, useEffect, useMemo } from 'react';
import io from 'socket.io-client';

function App() {
  const [config, setConfig] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  // 异步加载配置文件
  useEffect(() => {
    fetch('app-config.json')
      .then(res => res.json())
      .then(data => {
        setConfig(data);
        setIsLoading(false);
      })
      .catch(err => {
        console.error('配置加载失败:', err);
        setIsLoading(false);
      });
  }, []);

  // 仅当配置变化时创建Socket.io连接
  const socketio = useMemo(() => {
    if (!config) return null;
    return io.connect(`http://${config.serverIP}:${config.serverPort}`);
  }, [config]);

  // 加载中状态提示
  if (isLoading) {
    return <div>加载配置中...</div>;
  }

  // 配置加载失败提示
  if (!config) {
    return <div>配置加载失败，请检查app-config.json文件</div>;
  }

  // 配置加载完成后渲染组件内容
  return (
    <div className="App">
      {/* 此处编写你的组件逻辑，socketio可通过props传递给子组件 */}
      {/* 示例：<ChatComponent socket={socketio} /> */}
    </div>
  );
}

export default App;

方案2：Electron环境优化（直接读取本地文件） #

在Electron环境中，可通过IPC通信直接读取本地配置文件，无需通过fetch，更高效且避免网络请求问题：

1. 修改electron.js，添加IPC监听事件：

// electron.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');

// ... 其他窗口创建逻辑

// 响应前端获取配置的请求
ipcMain.handle('get-app-config', async () => {
  const configPath = path.join(__dirname, 'app-config.json');
  const configData = fs.readFileSync(configPath, 'utf-8');
  return JSON.parse(configData);
});

2. 修改App.js，通过IPC获取配置：

import React, { useState, useEffect, useMemo } from 'react';
import io from 'socket.io-client';
const { ipcRenderer } = window.require('electron');

function App() {
  const [config, setConfig] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    ipcRenderer.invoke('get-app-config')
      .then(data => {
        setConfig(data);
        setIsLoading(false);
      })
      .catch(err => {
        console.error('获取配置失败:', err);
        setIsLoading(false);
      });
  }, []);

  const socketio = useMemo(() => {
    if (!config) return null;
    return io.connect(`http://${config.serverIP}:${config.serverPort}`);
  }, [config]);

  if (isLoading) {
    return <div>加载配置中...</div>;
  }

  if (!config) {
    return <div>配置加载失败，请检查app-config.json文件</div>;
  }

  return (
    <div className="App">
      {/* 组件逻辑 */}
    </div>
  );
}

export default App;

关键改进点 #

• 将异步配置加载逻辑放到组件内部，利用React状态控制渲染时机
• 使用useMemo缓存Socket.io连接，避免组件重渲染时重复创建连接
• 添加加载中、加载失败的状态提示，提升用户体验

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