React Hook useFetch顶层调用报错，求index.js中微前端URL动态配置方案

问题根源 #

你遇到的错误是因为React Hook只能在React函数组件或自定义Hook的顶层调用，而你直接在index.js的顶层作用域调用了useFetch这个自定义Hook，违反了Hook规则。另外你的useFetch实际上没有使用任何React Hook特性（比如useState、useEffect），完全没必要定义成Hook。

解决方案 #

1. 将useFetch改为普通异步工具函数 #

修改./utils/useFetch.js，去掉Hook包装，改成普通异步函数：

export default async function fetchData(url, requestData, requestType) {
  try {
    const response = await fetch(url, {
      method: requestType,
      headers: {
        'Content-Type': 'application/json',
        // 根据需求添加其他请求头，比如认证信息
      },
      body: requestType !== 'GET' ? JSON.stringify(requestData) : undefined,
    });

    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    const data = await response.json();
    return [data]; // 保持和原Hook一致的返回格式
  } catch (error) {
    console.error('请求出错:', error);
    throw error; // 抛出错误让调用方处理
  }
}

2. 修改index.js的初始化逻辑 #

在index.js中用立即执行异步函数包裹请求逻辑，确保获取URL后再加载bootstrap：

import fetchData from "./utils/useFetch"; // 路径不变，只是函数变成普通异步函数

(async function initApp() {
  try {
    const [urls] = await fetchData("api/urlsFromBackend", {}, "GET");
    console.log("urls", urls);
    window.myMfe1URL = urls.myMfe1URL;
  } catch (e) {
    console.error("获取微前端URL失败", e);
    // 可选：添加降级方案，设置默认URL
    window.myMfe1URL = "https://默认微前端地址.com";
  } finally {
    // 无论请求成功或失败，都加载bootstrap
    await import('./bootstrap');
  }
})();

export {};

为什么这样可行？ #

• 普通异步函数不受React Hook规则限制，可以在index.js顶层的立即执行函数中调用
• 用async/await确保先完成URL请求并设置全局变量，再加载bootstrap，满足你"调用App.js前设置URL"的需求
• finally块保证即使请求失败，也能正常启动应用，避免卡住

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