自定义useFetch Hook优化：实现挂载请求与错误重试功能

要满足组件挂载自动请求、错误时点击重试的需求，需要对useFetch Hook做两处关键调整：暴露重新请求方法、优化请求状态重置逻辑。

修改后的useFetch Hook #

import { useState, useEffect, useCallback } from 'react';

export function useFetch(initialState, url, header) {
  const [value, setValue] = useState(initialState);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // 提取请求逻辑为可复用函数
  const fetchData = useCallback(async () => {
    setIsLoading(true);
    setError(null); // 重新请求前清空错误
    try {
      const res = await fetch(url, {
        headers: header,
      });
      if (!res.ok) {
        throw new Error("There was an error getting data from API");
      }
      const data = await res.json();
      setValue(data.record);
    } catch (error) {
      setError(error.message);
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  }, [header, url]);

  // 组件挂载时自动发起请求
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // 返回错误、加载状态、数据、重新请求方法
  return [error, isLoading, value, fetchData];
}

组件中使用示例 #

const [error, isLoading, tabsArr, refetch] = useFetch([], url, header);

return (
  <>
    {error && <ErrorMessage onClick={refetch} />}
    {/* 其他渲染逻辑：加载状态、数据展示 */}
    {isLoading && <LoadingSpinner />}
    {!isLoading && !error && <Tabs data={tabsArr} />}
  </>
);

关键改动说明 #

• 提取fetchData并使用useCallback：把请求逻辑封装成独立函数，用useCallback缓存避免重复创建，同时让外部能直接调用它触发重新请求。
• 重新请求前重置状态：每次调用fetchData时，先将isLoading设为true、error设为null，保证重试时UI能正确反馈加载状态，同时清空之前的错误提示。
• 替换返回值中的setError为fetchData：不再让外部直接修改错误状态，而是通过调用refetch统一处理状态重置和重新请求，逻辑更内聚。
• 保留自动请求逻辑：useEffect依然在组件挂载时调用fetchData，满足初始自动请求的需求。

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