如何将React重复的加载错误处理代码抽象为可复用组件或对象？

你当前的代码存在大量重复的异步操作状态管理逻辑，包括加载状态、错误状态、超时清除错误等，完全可以通过自定义React Hook来封装这些通用逻辑，实现复用。

实现自定义Hook #

我们可以封装一个通用的Hook，内部包含所有重复的状态和方法，对外暴露需要的状态控制和错误处理能力：

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

// 定义Hook返回值类型
type AsyncHandlerReturn = {
  loading: boolean;
  setLoading: React.Dispatch<React.SetStateAction<boolean>>;
  error: string | null;
  setError: React.Dispatch<React.SetStateAction<string | null>>;
  timedError: (error: string, seconds: number) => void;
};

export function useAsyncHandler(initialLoading = false): AsyncHandlerReturn {
  // 加载状态
  const [loading, setLoading] = useState<boolean>(initialLoading);
  // 错误超时引用
  const errorTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  // 错误状态
  const [error, setError] = useState<string | null>(null);

  // 错误处理函数
  const handleError = useCallback((error: string | null) => {
    if (error) console.error(error);
    setError(error);
  }, []);

  // 定时清除错误的回调
  const timedError = useCallback((error: string, seconds: number) => {
    handleError(error);
    if (errorTimeoutRef.current) clearTimeout(errorTimeoutRef.current);
    errorTimeoutRef.current = setTimeout(() => {
      setError(null);
    }, seconds * 1000);
  }, []);

  return {
    loading,
    setLoading,
    error,
    setError,
    timedError
  };
}

在组件中复用Hook #

现在你可以在组件中多次调用这个Hook，生成不同的异步操作实例，完全替代原来的重复代码：

// 加载供应商的逻辑
const {
  loading: loadingAllVendors,
  setLoading: setLoadingAllVendors,
  error: loadAllVendorsError,
  timedError: timedLoadAllVendorsError
} = useAsyncHandler(true); // 初始加载状态设为true，对应原代码的初始值

// 加载制造商的逻辑
const {
  loading: loadingAllManufacturers,
  setLoading: setLoadingAllManufacturers,
  error: loadAllManufacturersError,
  timedError: timedLoadAllManufacturersError
} = useAsyncHandler(true);

// 搜索零件的逻辑
const {
  loading: searching,
  setLoading: setSearching,
  error: searchError,
  timedError: timedSearchError
} = useAsyncHandler(false); // 初始加载状态设为false，对应原代码的初始值

// 错误时长可以统一定义或者传参，比如统一用6秒
const DEFAULT_ERROR_DURATION = 6;

// 使用示例：比如加载供应商失败时
// timedLoadAllVendorsError('加载供应商失败', DEFAULT_ERROR_DURATION);

说明 #

• 这个自定义Hook完全封装了所有重复的状态和逻辑，内部没有任何业务相关的命名，通过解构赋值可以为每个业务场景设置对应的变量名
• 支持自定义初始加载状态（比如加载供应商初始为true，搜索初始为false）
• 错误显示时长可以作为参数传入timedError，也可以在Hook内部预设默认值（如果大部分场景都是6秒，可以修改Hook添加默认参数）

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