React Hook“useFetch”无法在顶层调用

Question

我试图在调用 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');

。

Answer 1

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();