如何在自定义Hook内部调用依赖前置数据的多个数据获取自定义Hook？

我要获取一组关联数据，需要依次调用多个发起API请求的自定义Hook，每个Hook的输入依赖上一个Hook返回的数据。现在有两个思路，但都有问题：

• 把第一个之外的Hook放进useEffect里，把依赖数据加入依赖数组，但这样会因为在effect里条件调用Hook违反Hook规则报错。
• 把第一个Hook放进useEffect，结果存进状态，再用if判断状态存在时调用其他Hook？

原代码示例：

const useSomeCustomData = ({ids}) => {
  const { data: firstData } = useFirstData({
    ids: ids,
  });
  const investmentIds = firstData?.investments.map(
    (investment) => investment?.id
  );
  //next one depending on previously gotten investmentIds
  const { data: secondData } = useSecondData({
    investmentId: investmentIds ? investmentIds : undefined,
  });
  const start = secondData?.products?.map((product) => {
    return product.date;
  })[0];
   //next one depending on previously gotten "start" from secondData
  const { data: thirdData } =
    useThirdData({
      startDate: start,
    });
}

正确处理方式 #

React Hook的规则明确要求不能在条件判断、循环、嵌套函数里调用Hook，所以直接用if判断后调用子Hook的写法肯定不行。这里给两种实用的解决方案：

方案1：让子Hook支持空依赖自动跳过请求

核心思路是给每个自定义Hook加一个开关参数，当依赖数据未就绪时，不发起API请求。如果这些Hook是你自己实现的，直接扩展即可；如果是第三方Hook（比如React Query、SWR），它们大多自带类似enabled的控制参数。

修改后的主Hook代码：

const useSomeCustomData = ({ ids }) => {
  const { data: firstData } = useFirstData({ ids });
  const investmentIds = firstData?.investments?.map(inv => inv.id);

  // 只有investmentIds存在时，才触发useSecondData请求
  const { data: secondData } = useSecondData({ 
    investmentId: investmentIds,
    enabled: !!investmentIds // 控制请求开关
  });

  const start = secondData?.products?.map(product => product.date)[0];

  // 同理，start存在时才触发useThirdData请求
  const { data: thirdData } = useThirdData({
    startDate: start,
    enabled: !!start
  });

  // 返回合并后的状态，方便外部使用
  return {
    firstData,
    secondData,
    thirdData,
    loading: !firstData || !secondData || !thirdData
  };
};

给自定义Hook加开关的示例（以useSecondData为例）：

const useSecondData = ({ investmentId, enabled = true }) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 依赖未就绪或开关关闭时直接返回
    if (!enabled || !investmentId) return;

    const fetchData = async () => {
      setLoading(true);
      try {
        const res = await fetch(`/api/investments?ids=${investmentId.join(',')}`);
        setData(await res.json());
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [investmentId, enabled]);

  return { data, loading };
};

方案2：封装成单Hook链式请求

如果不想修改子Hook，也可以把整个链式请求逻辑放进一个useEffect里，用状态存储每一步结果，完全手动控制请求顺序：

const useSomeCustomData = ({ ids }) => {
  const [firstData, setFirstData] = useState(null);
  const [secondData, setSecondData] = useState(null);
  const [thirdData, setThirdData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchAllData = async () => {
      try {
        // 第一步：获取基础数据
        const firstRes = await fetch(`/api/first?ids=${ids.join(',')}`);
        const first = await firstRes.json();
        setFirstData(first);

        // 第二步：用第一步结果请求下一级数据
        const investmentIds = first.investments.map(inv => inv.id);
        const secondRes = await fetch(`/api/investments?ids=${investmentIds.join(',')}`);
        const second = await secondRes.json();
        setSecondData(second);

        // 第三步：用第二步结果请求最终数据
        const start = second.products.map(p => p.date)[0];
        const thirdRes = await fetch(`/api/third?start=${start}`);
        const third = await thirdRes.json();
        setThirdData(third);
      } catch (err) {
        console.error('请求失败:', err);
      } finally {
        setLoading(false);
      }
    };

    if (ids) fetchAllData();
  }, [ids]);

  return { firstData, secondData, thirdData, loading };
};

这种方式的好处是完全掌控请求流程，避开Hook规则限制，但缺点是失去了子Hook的复用性。

关键提醒 #

• 永远不要违反React Hook规则：Hook必须在组件顶层调用，不能嵌套在条件、循环里。
• 如果用第三方数据请求库（React Query、SWR等），优先用它们自带的enabled参数控制请求时机，这是最简洁的方案。

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