React自定义Hook触发Invalid use of hook错误，求排查原因

兄弟，你这个问题的根源其实特别明确——你在普通的action函数（非组件、非自定义Hook）里调用了自定义Hook useApiCall，这直接踩了React Hook规则的红线！

为什么会报错？ #

React的Hook规则有两条核心要求，你直接违反了第一条：

• 所有Hook（包括自定义Hook）必须直接在函数组件的顶层作用域调用，或者在其他自定义Hook的顶层作用域调用。
• 不能在普通JavaScript函数、条件判断、循环、异步回调里调用Hook。

你的authAction.js里的那些函数都是普通的业务逻辑函数，既不是React组件，也不是自定义Hook，所以在里面调用useApiCall肯定会触发这个错误——哪怕你把Hook简化到只剩一个useState，只要调用位置不对，错误就会存在。

怎么解决？ #

核心思路是把API调用的逻辑和Hook分离开：Hook给组件用，普通API函数给action这类业务逻辑用。

步骤1：抽离独立的API调用函数

先把useApiCall里的请求逻辑抽成一个普通的异步函数，比如单独建个apiCall.js：

export const apiCall = async (url, method, data) => {
  try {
    let response;
    switch (method) {
      case 'GET':
        response = await fetch(url);
        break;
      case 'POST':
        response = await fetch(url, {
          method,
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(data)
        });
        break;
      default:
        throw new Error('Incorrect HTTP Request Method');
    }
    const resBody = await response.json();
    if (response.ok) {
      return { isLoading: false, isError: false, data: resBody };
    } else {
      return { isLoading: false, isError: true, data: resBody };
    }
  } catch (error) {
    return { isLoading: false, isError: true, data: 'Unable to send request!' };
  }
};

步骤2：重构你的自定义Hook

让useApiCall调用上面的普通函数，保持它给组件使用的功能：

import { useState, useEffect } from 'react';
import { apiCall } from './apiCall';

export const useApiCall = (initialUrl, initialMethod, initialData) => {
  const [state, setState] = useState({
    isLoading: false,
    isError: null,
    data: initialData || ''
  });
  const [method, setMethod] = useState(initialMethod || null);
  const [url, setUrl] = useState(initialUrl || '');

  useEffect(() => {
    const fetchData = async () => {
      setState(prev => ({ ...prev, isLoading: true, isError: false }));
      const result = await apiCall(url, method, state.data);
      setState(result);
    };
    if (method && url) {
      fetchData();
    }
  }, [url, method, state.data]);

  return [state, setUrl, setMethod];
};

步骤3：在authAction里使用普通API函数

现在你的action函数可以直接调用抽离出来的apiCall，不用碰Hook了：

import { apiCall } from '../path-to-your-apiCall-file';

export const registerUser = async (username, password) => {
  const result = await apiCall('/api/auth/register', 'POST', { username, password });
  // 这里根据result处理逻辑，比如dispatch对应的action到reducer
  return result;
};

这样就能彻底解决你的Invalid hook call错误了，因为现在Hook只在组件或其他Hook里被调用，完全符合规则。

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