React自定义钩子调用无效错误求助：复用API调用函数时触发Invalid Hook Call

这个错误的核心原因很明确：你在onClick回调函数里调用了自定义HookFetchData，违反了React Hook的使用规则。React要求所有Hook必须在函数组件的顶层作用域调用，不能嵌套在回调、条件判断、循环或者其他函数内部。

问题拆解 #

1. 原自定义HookFetchData本身还有个小问题：useEffect没有设置依赖数组，这会导致组件每次渲染都重复发起请求，造成无限循环。
2. 主组件里把Hook调用放在点击事件里，直接违反了Hook的调用规则，这才是触发错误的直接原因。

修正方案 #

我们需要调整自定义Hook的设计，让它暴露一个可以在回调中调用的请求触发函数，同时确保所有Hook调用都在组件顶层。

第一步：修复自定义Hook

重命名Hook为useFetchData（React Hook的命名规范是前缀为use，方便识别），并添加触发请求的函数：

import { useState, useEffect, useCallback } from 'react';
import axios from 'axios';

export const useFetchData = (initialUrl = '', initialQuery = '', initialVariable = {}) => { 
  const [fetchData, setFetchData] = useState([]); 
  const [url, setUrl] = useState(initialUrl);
  const [query, setQuery] = useState(initialQuery);
  const [variable, setVariable] = useState(initialVariable);

  // 封装请求逻辑，用useCallback缓存函数避免不必要的重渲染
  const fetchDataFn = useCallback(async () => { 
    try {
      const queryResult = await axios.post( 
        url, 
        { query: query, variables: variable } 
      ); 
      const result = queryResult.data.data; 
      setFetchData(result.mydata); 
    } catch (err) {
      // 别忘了添加错误处理
      console.error('请求失败:', err);
    }
  }, [url, query, variable]);

  // 可选：如果需要组件加载时自动发起请求，保留这个useEffect；不需要则删除
  useEffect(() => {
    if (url && query) {
      fetchDataFn();
    }
  }, [fetchDataFn]);

  // 暴露触发请求的函数，允许外部传入新的参数
  const triggerFetch = (newUrl, newQuery, newVariable) => {
    // 更新参数（如果传入了新值）
    if (newUrl) setUrl(newUrl);
    if (newQuery) setQuery(newQuery);
    if (newVariable) setVariable(newVariable);
    // 发起请求
    fetchDataFn();
  };

  return { fetchData, triggerFetch }; 
}

第二步：调整主组件的调用方式

把Hook移到组件顶层，在点击事件里调用triggerFetch函数：

import { useFetchData, useEffect } from 'react'; 

export const MainPage = props => { 
  // 在组件顶层调用Hook，传入初始参数（可选）
  const { fetchData, triggerFetch } = useFetchData(); 

  const onClick = (event) => { 
    // 在点击事件里调用触发函数，传入你的url、query、variable
    triggerFetch(url, query, variable);
  };

  // 因为请求是异步的，如果你想在数据更新后做操作，用useEffect监听fetchData的变化
  useEffect(() => {
    console.log('最新请求结果:', fetchData);
  }, [fetchData]);

  return (
    // 你的组件内容，比如触发点击的按钮
    <button onClick={onClick}>获取数据</button>
  );
}

额外注意事项 #

• 遵循React Hook命名规范：自定义Hook必须以use开头，这样React才能识别并检查Hook规则。
• 错误处理：一定要给异步请求添加错误捕获，避免请求失败导致组件崩溃。
• 依赖数组：所有Hook的依赖数组要正确设置，避免漏加导致的逻辑错误或无限渲染。

内容的提问来源于stack exchange，提问作者Devil's Dream