在函数中使用 Hook 导致无效的钩子调用

Question

我目前正在使用 ReactJS 将我的网站重写为 webapp，但在使用和理解 hooks 时遇到了一些麻烦。我写了一个自定义钩子“useFetch”，它可以工作，直到现在才遇到任何问题：我目前正在尝试在这样的函数中使用我的钩子：

import useFetch from '../../../hooks/useFetch';
import {clientGenerateProcessScreen, clientClearProcessScreen} from '../../../utils/processScreens';

function myFunction (paramName, paramType, paramDesc) {
    let process_screen = clientGenerateProcessScreen ();
    let rqt_url = `/fileNameA.php`;
    if (paramType!= "a") rqt_url = `/fileNameB.php`;

    const { data, isLoading, error } = useFetch(rqt_url);
    if (!isLoading && data.success) {
        doSomethingA ();
    } else {
        showErrorMessage ();
    }
}
export default myFunction;

该函数是从反应组件上的 onClick 调用的。它理论上应该可以正常工作，但是，我总是会遇到这个错误：

未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

1. 您可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 您可能在同一个应用中拥有多个 React 副本

我不明白这里的错误在哪里。我在函数顶部使用我的钩子，而不是在条件或任何可能违反钩子规则的情况下。我尝试在我的函数文件中导入 React 和 ReactDOM，但这并不能解决我的任何问题。我猜我可能错过了一些基本或简单的东西，但找不到什么......

Answer 1

首先，您实现了一个自定义钩子，因此它应该以“使用”一词为前缀：useMyFunction，更多上下文请参见Do React hooks really have to start with "use"?。

既然你知道它是一个钩子而不是一个实用函数，它必须遵循钩子 API（“钩子规则”），其中一个规则是你必须在顶层调用它，即你不能使用它作为回调。

为了解决它，它需要一个逻辑上的改变，它不是你有一个逐步修复指南的东西，重新考虑它的逻辑用途。