React Query中在useEffect内调用useQuery触发Invalid hook call错误

错误原因分析 #

你遇到的Uncaught Error: Invalid hook call错误，结合代码来看核心问题如下：

• 违反Hook使用规则：如果GetUserInfo是自定义Hook（内部包含useQuery、useEffect等React Hook），在useEffect的回调函数里调用它就违反了「Hook只能在函数组件顶层或其他自定义Hook顶层调用」的规则，不能在嵌套函数、判断逻辑内调用Hook。
• 版本不匹配风险：React与React DOM版本主版本号不一致时，也可能触发该错误，需优先排查Hook调用问题后再验证版本。

正确实现方案 #

针对「仅当user.email存在时执行GetUserInfo查询」的需求，分两种场景处理：

场景1：GetUserInfo是普通异步函数 #

如果GetUserInfo是普通API请求函数（返回Promise），直接在useEffect内条件调用即可：

useEffect(() => {
  const fetchUserInfo = async () => {
    if (user.email) {
      const { data } = await GetUserInfo(user.email);
      // 此处可处理返回数据，比如更新组件state
    }
  };

  fetchUserInfo();
}, [user.email]);

场景2：GetUserInfo是自定义Hook #

如果GetUserInfo是自定义Hook，必须放在组件顶层，通过配置项控制查询触发时机：

// 将Hook放在组件顶层，用enabled参数控制是否执行查询
const { data } = GetUserInfo(user.email, { enabled: !!user.email });

多数数据请求类Hook（如React Query的useQuery）都支持enabled配置，当user.email存在时，enabled为true才会发起查询。

额外注意事项 #

• 验证版本一致性：通过npm list react react-dom查看版本，确保两者主版本号相同，避免版本不匹配引发的Hook错误。
• 严格遵循Hook规则：所有Hook调用必须处于函数组件顶层作用域，不能在条件、循环、嵌套函数内调用。

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