将React组件内catchError封装为自定义Hook时触发报错如何解决

问题原因 #

你报错的核心原因是违反了React Hook的调用规则：Hook只能在React函数组件/自定义Hook的顶层调用，不能在普通模块的顶层作用域执行。你现在把useState直接写在catchError.tsx的最外层，不属于任何函数组件或者自定义Hook，所以触发编译报错。

顺带纠正一个小细节：如果文件只是导出Hook/工具函数、没有JSX渲染逻辑，不需要用.tsx后缀，用.ts即可，只有包含JSX代码的文件才需要.tsx后缀。

解决方案 #

有两种常用的复用实现方式，你可以根据自己的业务场景选择：

方案1：封装为自定义Hook（更推荐） #

如果你希望把loading、message状态也一起封装复用，直接做成符合React规则的自定义Hook即可，注意自定义Hook必须以use开头命名：

// src/hooks/useCatchError.ts
import { useState } from 'react';

export const useCatchError = () => {
  const [message, setMessage] = useState("idle");
  const [loading, setLoading] = useState(false);

  const catchError = (e: any, tip: string) => {
    // throw new Error(e)
    setMessage(tip);
    setLoading(false);
    console.error(e);
  };

  // 将组件需要用到的状态和方法对外返回
  return {
    message,
    loading,
    setLoading, // 组件触发异步操作前开启加载需要用到该方法
    catchError
  }
}

组件内使用示例：

import { useCatchError } from '@/hooks/useCatchError';

const YourComponent = () => {
  // 每个组件调用自定义Hook会生成独立的状态，互不干扰
  const { loading, message, setLoading, catchError } = useCatchError();

  const fetchData = async () => {
    try {
      setLoading(true);
      // 执行你的异步请求/其他可能报错的逻辑
      await requestApi()
    } catch (e) {
      catchError(e, '请求失败，请稍后重试')
    }
  }

  return <div>
    {loading && <span>加载中...</span>}
    <p>{message}</p>
  </div>
}

方案2：封装为纯工具函数 #

如果你希望loading、message状态仍由组件自己维护，只复用错误处理逻辑，可以把状态更新方法作为参数传入工具函数：

// src/utils/catchError.ts
export const catchError = (
  e: any,
  tip: string,
  setMessage: (msg: string) => void,
  setLoading: (status: boolean) => void
) => {
  setMessage(tip);
  setLoading(false);
  console.error(e);
}

组件内使用示例：

import { catchError } from '@/utils/catchError';
import { useState } from 'react';

const YourComponent = () => {
  const [message, setMessage] = useState('idle');
  const [loading, setLoading] = useState(false);

  const fetchData = async () => {
    try {
      setLoading(true);
      await requestApi()
    } catch (e) {
      catchError(e, '请求失败', setMessage, setLoading)
    }
  }
}

额外提示 #

如果你需要全局统一的错误提示（比如全局顶部toast弹窗），不需要每个组件单独维护message状态，可以配合Context或者轻量状态管理库（Zustand、Jotai等）实现全局的错误状态管理。

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