NodeJS Electron React -如何在应用组件渲染之前获取本地JSON文件数据?

9wbgstp7  于 2023-05-28  发布在  Node.js
关注(0)|答案(1)|浏览(139)

你好,我正在构建一个Electron + React + Node应用程序。
我需要将数据从app-config.json文件导入server.js(包含服务器端逻辑)和App.js文件。
这是我的项目结构:

electron-react-app
-build
-dist
-public
--app-config.json
--server.js
--index.html
--electron.js
-src
--App.js
--index.js
---components

我需要将app-config.json中的数据导入到我的文件中,这样我就可以在变量中使用这些数据。
我可以在server.js上这样做:

const express = require("express");
const path = require("path");
const http = require("http");
const { Server } = require("socket.io");
const cors = require("cors");
const { SerialPort } = require("serialport");
const axios = require("axios");
const _ = require("underscore");
const fs = require("fs");
const bodyParser = require("body-parser");
const shutdown = require("electron-shutdown-command");
const { app } = require("electron");

const newApp = express();
newApp.use(cors());

const server = http.createServer(newApp);

const appConfigFile = require("./app-config.json");

let clientPort = appConfigFile.clientPort;
let serverIP = appConfigFile.serverIP;
let serverPort = appConfigFile.serverPort;

但是在我的App.js上,我试图在声明const socketio之前获取数据,但是类AppConfig变量是未定义的,并且io.connect()函数没有正确执行。

import io from "socket.io-client";

export class AppConfig {
  static serverIP;
  static serverPort;
}

fetch("app-config.json")
  .then((r) => r.json())
  .then((data) => {
    AppConfig.serverIP = data.serverIP;
    AppConfig.serverPort = data.serverPort;
  });

export const socketio = io.connect(`http://${AppConfig.serverIP}:${AppConfig.serverPort}`); 
//these variables come as undefined

function App() {...}

export default App;

是否有一种方法可以在获取app-config.json数据后才呈现我的App.js组件?
我也会在这里添加我的app-config.json:

{
  "serverIP": "localhost",
  "serverPort": 5000,
  "clientPort": 3000,
}

任何帮助都将不胜感激。

编辑:

这是我的index.js文件,其中呈现了我的App.js。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

import { ThemeProvider } from "@material-tailwind/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);
x4shl7ld

x4shl7ld1#

export class AppConfig {
  static serverIP;
  static serverPort;
}

fetch("app-config.json")
  .then((r) => r.json())
  .then((data) => {
    AppConfig.serverIP = data.serverIP;
    AppConfig.serverPort = data.serverPort;
  })
  .then(() => {
    io.connect(`http://${AppConfig.serverIP}:${AppConfig.serverPort}`);
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
      <ThemeProvider>
        <App />
      </ThemeProvider>
    );
  });

相关问题