您可以创建一个Context和ContextProvider来从json文件加载数据，将其设置为状态变量，然后将其传递给Context消费者：
DataContext.tsx:

import { createContext, useState, useContext, useEffect, PropsWithChildren } from "react";
import asyncData from "./asyncData";

interface IData {
  userid: string;
  conf: {
    sessionDuration: number;
    mac: string;
  };
}

interface IContextValue {
  data: IData;
}

const StateContext = createContext<IContextValue>(null!);

export function DataContextProvider(props: PropsWithChildren) {
  const [data, setData] = useState<IData>(undefined!);

  useEffect(() => {
    asyncData.then((json) => setData(json)).catch(console.error);
  }, []);

  // Optionally - wrap with useMemo
  const contextValue: IContextValue = {
    data: data
  };

  return (
    <StateContext.Provider value={contextValue}>
      {data && props.children}
    </StateContext.Provider>
  );
}

export default function useDataContext() {
  const context = useContext(StateContext);
  if (!context) {
    throw new Error(
      "useDataContext must be used within the DataContextProvider"
    );
  }
  return context;
}

更新到索引.tsx：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { DataContextProvider } from "./DataContext";

import App from "./App";
import asyncData from "./asyncData";

asyncData.then((config) => {
  console.log("Config is fetched before render: ", config);

  const rootElement = document.getElementById("root");
  const root = createRoot(rootElement!);

  root.render(
    <StrictMode>
      <DataContextProvider>
        <App />
      </DataContextProvider>
    </StrictMode>
  );
});

用法：

import useDataContext from "./DataContext";

export default function App() {
  const { data } = useDataContext();
  return <div className="App">{JSON.stringify(data)}</div>;
}

asyncData.ts:

const asyncData = fetch("./data/data.json").then((response) => response.json());

export default asyncData;