如何在React中初始获取JSON数据并在任意文件导出使用？

为什么你之前的写法会失败 #

你之前的代码里，get_data().then(...)是异步操作，JavaScript不会等待Promise完成就继续执行后续代码。当你在其他地方访问data变量时，Promise还没resolve，所以data始终是初始的{}或者undefined。React启动和模块加载都是同步执行的，异步数据请求不会阻塞这个过程，自然没法直接把Promise结果赋值给全局变量用。

实现步骤 #

1. 创建data.js：封装数据请求并导出Promise

我们把数据请求封装成异步函数，立即执行并导出它返回的Promise，这样React入口可以等待这个Promise完成后再启动。

// data.js
async function fetchMongoDBData() {
  try {
    // 替换成你的MongoDB后端API地址
    const res = await fetch('/api/get-mongodb-data');
    if (!res.ok) throw new Error(`请求失败：${res.status}`);
    return await res.json();
  } catch (err) {
    console.error('加载数据出错：', err);
    // 出错时返回默认数据，避免App崩溃
    return {};
  }
}

// 立即执行异步函数，导出Promise
export const appDataPromise = fetchMongoDBData();

2. 修改React入口文件：等待数据加载完成后再渲染

在React的入口文件（通常是index.js）里，先等待data.js导出的Promise完成，拿到数据后再渲染整个App。

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { appDataPromise } from './data';

// 初始化App：先等数据，再渲染
async function initApp() {
  const appData = await appDataPromise;
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      {/* 把数据通过props传给App，或者用全局状态管理 */}
      <App initialData={appData} />
    </React.StrictMode>
  );
}

initApp();

3. 在应用中全局使用数据

如果不想通过props层层传递数据，推荐用React Context做全局管理：

创建DataContext

// DataContext.js
import { createContext, useContext } from 'react';

const DataContext = createContext();

// 数据提供者组件
export function DataProvider({ children, data }) {
  return (
    <DataContext.Provider value={data}>
      {children}
    </DataContext.Provider>
  );
}

// 自定义Hook，方便组件获取数据
export function useData() {
  return useContext(DataContext);
}

修改入口文件的渲染逻辑

// index.js 里的initApp函数修改
async function initApp() {
  const appData = await appDataPromise;
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <React.StrictMode>
      <DataProvider data={appData}>
        <App />
      </DataProvider>
    </React.StrictMode>
  );
}

在任意组件中使用数据

// 比如某个业务组件
import { useData } from './DataContext';

function UserList() {
  const data = useData();
  return (
    <div>
      <h2>用户列表</h2>
      {data.users?.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}

export default UserList;

注意事项 #

• 如果你用的是CommonJS模块（没有在package.json里设置"type": "module"），修改data.js的导出方式：

  // CommonJS版本的data.js
  async function fetchMongoDBData() {
    // 同上逻辑
  }
  
  module.exports = fetchMongoDBData();
  

  入口文件用require导入：

  const appDataPromise = require('./data');
  

• 确保你的MongoDB后端API配置了正确的CORS，避免跨域问题。
• 数据加载失败时返回默认值，防止App因为缺少数据而崩溃。

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