React函数组件中使用useGet触发rules-of-hooks错误求助

你遇到的rules-of-hooks错误，根源是自定义Hook useGet被放在了useEffect的回调内部调用——React Hooks的核心规则明确要求：所有Hooks必须在函数组件的顶层作用域调用，不能嵌套在任何条件语句、循环、副作用回调（比如useEffect）这类嵌套函数里。

修正方案 #

把useGet移到组件的顶层直接调用，再在useEffect中使用它返回的方法：

export const MyComponent = () => {
  const [data, setData] = useState();
  // 移到组件顶层调用自定义Hook
  const { getData } = useGet("myUrl");

  useEffect(() => {
    setData(getData);
  }, [getData]);

  return (
     <div>{data}</div>
  );
};

额外注意事项 #

如果useGet返回的getData是每次渲染都会生成的新函数，会导致useEffect无限触发。这时需要在自定义Hook内部用useCallback包裹getData，或者调整useGet的设计逻辑——让它直接返回请求到的数据（更符合自定义Hook的常规用法），示例如下：

// 优化后的自定义Hook useGet
const useGet = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(url);
        const result = await res.json();
        setData(result);
      } catch (err) {
        console.error('请求失败:', err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading };
};

// 组件中使用
export const MyComponent = () => {
  const { data, loading } = useGet("myUrl");

  if (loading) return <div>加载中...</div>;

  return <div>{data ? JSON.stringify(data) : '暂无数据'}</div>;
};

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