自定义Hook中使用Context报错及编写规范检查清单问询

架构老林

2026-4-16

嘿，我来帮你梳理下这个报错的原因，再给你列个通俗易懂的自定义Hook必查清单～

首先说你遇到的错误：你的useFetch被定义成了async函数，这就违反了React自定义Hook的规则！React要求自定义Hook必须是同步函数，不能直接用async修饰，因为Hook的调用必须在组件渲染的同步阶段完成，异步函数会打破这个规则，所以才会抛出“无效Hook调用”的错误。你可以把异步请求逻辑放在Hook内部的useEffect或者useCallback里，而不是让Hook本身变成异步的。

下面是自定义Hook必须检查的几个关键点，按顺序列给你：

命名必须以use开头：这是React识别自定义Hook的硬性约定，比如你的useFetch是符合要求的，但如果改成fetchWeatherData这种不带use前缀的名字，React就不会把它当作Hook处理，调用时也会出错。
绝对不能是异步函数：Hook本身必须是同步的，异步逻辑（比如你的接口请求）要放在Hook内部的useEffect、useCallback等Hook里执行，不能直接给自定义Hook加async关键字。
只能在函数组件或其他自定义Hook的顶层调用：不能在条件判断、循环、嵌套函数（比如if块、for循环里面）里调用Hook，必须保证每次组件渲染时，Hook的调用顺序完全一致，React就是靠这个顺序来管理Hook的状态的。
别在普通JS函数里调用Hook：Hook只能用在React函数组件的主体（顶层），或者其他自定义Hook的顶层，要是在普通工具函数里调用，就会触发你遇到的那个错误。
确认Context的Provider已经正确包裹组件：用useContext之前，一定要确保对应的Context.Provider已经在当前组件的上层组件树中存在，不然useContext会返回Context的默认值，可能引发逻辑错误。

不要直接返回异步操作的结果：如果需要获取异步数据，应该在Hook内部用useState存储数据，同时维护加载、错误状态，比如可以把你的useFetch改成这样：

export const useFetch = () => {
  const { city, setFetchError } = useContext(appcontext);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchWeatherData = async () => {
      setLoading(true);
      try {
        const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
        const currentResponse = await fetch(`https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}`);
        if (currentResponse.ok) {
          const currentData = await currentResponse.json();
          setData(currentData);
          setFetchError(false);
        } else {
          throw new Error('error fetching weather details');
        }
      } catch (err) {
        setFetchError(true);
        setData(null);
      } finally {
        setLoading(false);
      }
    };

    // 确保有城市值再发起请求，避免无效调用
    if (city) {
      fetchWeatherData();
    }
  }, [city, setFetchError]);

  // 返回数据、加载状态供组件使用
  return { data, loading };
};

备注：内容来源于stack exchange，提问作者Ajith