如何在useEffect中调用带参数的React自定义Hook并解决调用报错？

错误原因 #

你在useEffect内部调用自定义Hook useApi，直接违反了React Hooks的核心规则：所有Hooks（包括自定义Hook）只能在函数组件的顶层作用域，或者其他自定义Hook的顶层作用域中调用，不能在副作用、条件判断、循环等嵌套逻辑里调用，这就是触发Invalid hook call错误的直接原因。

修正方案 #

其实你完全不需要在useEffect里重复调用useApi——自定义Hook本身会随着依赖参数的更新自动重新执行。我们只需要调整useApi的内部逻辑，让它能正确处理异步请求（假设你的api.get是异步操作），然后在组件顶层直接使用即可。

1. 修复自定义Hook useApi

让useApi内部处理数据请求和状态更新，依赖id实现参数变化时自动重新请求：

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

export default function useApi(id) {
  const [user, setUser] = useState({});
  const api = useGlobalApi();

  useEffect(() => {
    // 处理异步请求（如果api.get是Promise）
    const fetchUserData = async () => {
      try {
        const fetchedUser = await api.get(`..../${id}`);
        setUser(fetchedUser);
      } catch (err) {
        console.error('请求用户数据失败:', err);
        // 可添加错误处理逻辑
      }
    };

    // 当id存在时才发起请求
    if (id) {
      fetchUserData();
    }
  }, [id, api]); // 依赖id和api，任一变化时重新执行请求

  return user;
}

2. 简化Api组件

直接在组件顶层调用useApi，利用Hook的依赖更新机制自动获取新数据，无需额外的useState和useEffect：

// Api.tsx
export default function Api({ id }) { // 注意：React组件接收props对象，需解构获取id
  const user = useApi(id);

  // 直接使用user即可，id变化时useApi会自动返回新数据
  return (
    <div className="user-card">
      {user.id ? (
        <>
          <h3>{user.name}</h3>
          <p>邮箱：{user.email}</p>
        </>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

额外注意点 #

• 确保你的useGlobalApi也是符合Hook规则的自定义Hook，能正确返回API实例。
• 如果api.get是同步操作，useApi可以不用useEffect，直接返回结果即可，但这种场景很少见（一般API请求都是异步的）。

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