复用异步函数设置不同React状态变量的最佳实践

我有一个用于获取数据库对象（Referral）的异步函数，除了主数据获取外，应用的其他部分也通过该函数及其逻辑获取辅助Referral数据。异步函数无法直接返回值，因此只能用其结果设置状态变量。

最初的写法只能处理主Referral的情况：

const [mainReferral, setMainReferral] = useState<Referral|null>(null);

// Fetch main referral
const fetchReferral = async (referralId:string) => {
    const response = await get<any>("/referral/" + referralId);
    // 大量衍生字段处理逻辑
    response['specialDerivedField1'] = ...;
    response['specialDerivedField2'] = ...;
    //...
    setMainReferral(response);
}

但我还存在多个辅助状态需要更新：

const [auxReferral1, setAuxReferral1] = useState<Referral|null>(null);
const [auxReferral2, setAuxReferral2] = useState<Referral|null>(null);
//...

如果用if-else判断来设置不同状态，写法不够健壮：

const fetchReferral = async (referralId:string, case1:boolean, case2:boolean) => {
   //... 
   if (case1) 
      setAuxReferral1(response);
   else if (case2) {
      setAuxReferral2(response);
   } else {
      setMainReferral(response);
   }
}

想知道是否有其他最佳实践？能否传入状态变量名来找到对应的setter（不确定React是否支持）？另外希望将该工具函数抽离到不涉及状态的单独文件中，异步函数是否可行？

最佳实践方案 #

1. 直接传入状态setter函数 #

不需要用布尔值判断，直接把对应的setState函数作为参数传入，函数逻辑更通用，避免分支混乱：

const fetchReferral = async (referralId:string, setState: (data: Referral) => void) => {
    const response = await get<any>("/referral/" + referralId);
    // 统一的衍生字段处理逻辑
    response['specialDerivedField1'] = ...;
    response['specialDerivedField2'] = ...;
    //...
    setState(response);
}

// 使用时
fetchReferral(mainId, setMainReferral);
fetchReferral(auxId1, setAuxReferral1);
fetchReferral(auxId2, setAuxReferral2);

这种方式让函数职责单一：只负责获取和处理数据，状态更新交给传入的setter完成。

2. 抽离纯数据处理函数，组件内处理状态更新 #

如果想完全分离数据逻辑和状态管理，可以把数据获取+处理的部分封装到无状态工具文件，返回处理后的结果，组件内调用后更新对应状态：

// utils/referral.ts
export const getProcessedReferral = async (referralId:string): Promise<Referral> => {
    const response = await get<any>("/referral/" + referralId);
    // 所有衍生字段处理逻辑
    response['specialDerivedField1'] = ...;
    response['specialDerivedField2'] = ...;
    //...
    return response as Referral;
}

// 组件内使用
const fetchMainReferral = async () => {
    const data = await getProcessedReferral(mainId);
    setMainReferral(data);
}

const fetchAuxReferral1 = async () => {
    const data = await getProcessedReferral(auxId1);
    setAuxReferral1(data);
}

这种方式的工具函数不依赖React，可复用性和可测试性更强。

3. 封装自定义Hook统一管理逻辑 #

如果多个组件需要复用这套获取+状态更新逻辑，可以封装成自定义Hook，整合状态、加载态、错误态：

// hooks/useReferral.ts
export const useReferral = () => {
    const [referral, setReferral] = useState<Referral|null>(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<Error|null>(null);

    const fetchReferral = async (referralId:string) => {
        setLoading(true);
        try {
            const response = await get<any>("/referral/" + referralId);
            // 衍生字段处理
            response['specialDerivedField1'] = ...;
            response['specialDerivedField2'] = ...;
            setReferral(response);
            setError(null);
        } catch (err) {
            setError(err as Error);
        } finally {
            setLoading(false);
        }
    }

    return { referral, loading, error, fetchReferral };
}

// 组件内使用
const { referral: mainReferral, fetchReferral: fetchMainReferral } = useReferral();
const { referral: auxReferral1, fetchReferral: fetchAuxReferral1 } = useReferral();

// 调用时
fetchMainReferral(mainId);
fetchAuxReferral1(auxId1);

自定义Hook让组件逻辑更简洁，同时保证每个实例的状态独立。

4. 统一管理多状态（可选） #

如果辅助状态和主状态关联性强，可以用一个对象状态管理，减少分散的useState：

const [referrals, setReferrals] = useState({
    main: null as Referral|null,
    aux1: null as Referral|null,
    aux2: null as Referral|null,
});

const fetchReferral = async (referralId:string, key: 'main'|'aux1'|'aux2') => {
    const response = await get<any>("/referral/" + referralId);
    // 衍生字段处理
    response['specialDerivedField1'] = ...;
    response['specialDerivedField2'] = ...;
    // 更新对应key的状态
    setReferrals(prev => ({ ...prev, [key]: response }));
}

// 使用时
fetchReferral(mainId, 'main');
fetchReferral(auxId1, 'aux1');

这种方式适合状态间有逻辑关联的场景，减少状态变量数量；若状态完全独立，分开管理更清晰。

内容的提问来源于stack exchange，提问作者gene b.