我试图在调用 App.js 之前在我的 React 应用程序的 index.js 中添加以下代码(目的是从端点响应动态设置一些微前端 URL)
我正在尝试如下;
import useFetch from "./utils/useFetch";
const fetchFn = useFetch();
try {
let [urls] = await fetchFn("api/urlsFromBackend", {}, "GET");
console.log("urls", urls);
window.myMfe1URL = urls.myMfe1URL;
} catch (e) {
console.error("error caught", e);
}
import('./bootstrap');
export {};
下面是我的useFetch
export default function useFetch() {
const fetchData = async (url, requestData, requestType) => {
try {
} catch (error) {}
}
return fetchData;
}
但是,我收到一条错误消息
React Hook“useFetch”无法在顶层调用。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用
有没有办法在index.js中调用此代码,并考虑到我最后也有
import('./bootstrap');
。
Eslint-plugin-react-hook 使用命名约定来告诉什么是钩子,什么不是。任何以
use
开头的内容都被认为是钩子,因此必须遵循 钩子规则
您的
useFetch
函数似乎不是一个钩子,因为它不调用任何内置钩子(例如,useState
,useEffect
)。因此,要解决这个问题,只需更改名称,以便 lint 规则可以正确地将其识别为非钩子函数:
export default function createFetch() {
const fetchData = async (url, requestData, requestType) => {
try {
} catch (error) {}
}
return fetchData;
}
// ...
const fetchFn = createFetch();