React中如何合并多个基于不同Props ID的数据获取useEffect？

当然不用一直写结构重复的useEffect啦！这种重复逻辑完全可以优雅重构，给你两种实用的方案：

方案一：合并成单个useEffect统一处理 #

你可以把所有需要获取的ID和对应的状态更新函数整理成一个配置数组，然后在单个useEffect里循环执行请求逻辑，同时处理竞态问题：

import { useState, useEffect } from 'react';

function YourComponent({ headerId, bodyId, footerId, sidebarId, navId, modalId }) {
  // 定义对应的数据状态
  const [header, setHeader] = useState(null);
  const [body, setBody] = useState(null);
  const [footer, setFooter] = useState(null);
  const [sidebar, setSidebar] = useState(null);
  const [nav, setNav] = useState(null);
  const [modal, setModal] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchAllData = async () => {
      // 配置数组：每个项对应ID和状态更新函数
      const fetchItems = [
        { id: headerId, setter: setHeader },
        { id: bodyId, setter: setBody },
        { id: footerId, setter: setFooter },
        { id: sidebarId, setter: setSidebar },
        { id: navId, setter: setNav },
        { id: modalId, setter: setModal },
      ];

      // 循环处理每个请求
      for (const { id, setter } of fetchItems) {
        if (!id) continue; // ID为空时跳过请求，避免无效调用
        try {
          const data = await api.fetch(id, { signal });
          setter(data);
        } catch (err) {
          // 忽略请求取消的错误，处理其他异常
          if (err.name !== 'AbortError') {
            console.error(`获取ID为${id}的数据失败:`, err);
          }
        }
      }
    };

    fetchAllData();

    // 组件卸载或依赖变化时，取消未完成的请求
    return () => abortController.abort();
  }, [headerId, bodyId, footerId, sidebarId, navId, modalId]);

  // 组件渲染逻辑...
}

这种方式的好处是减少了useEffect的数量，所有请求逻辑集中管理，适合需要统一控制请求时机的场景。

方案二：封装成可复用的自定义Hook #

如果希望每个数据项的加载、错误状态独立管理，或者后续其他组件也需要类似逻辑，推荐封装一个通用的useFetchById Hook：

import { useState, useEffect } from 'react';

// 自定义Hook：根据ID获取数据
function useFetchById(id) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!id) return;

    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      setError(null);
      try {
        const response = await api.fetch(id, { signal });
        setData(response);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => abortController.abort();
  }, [id]);

  return { data, loading, error };
}

// 在组件中使用自定义Hook
function YourComponent({ headerId, bodyId, footerId, sidebarId, navId, modalId }) {
  const { data: header, loading: headerLoading } = useFetchById(headerId);
  const { data: body, loading: bodyLoading } = useFetchById(bodyId);
  const { data: footer, loading: footerLoading } = useFetchById(footerId);
  const { data: sidebar, loading: sidebarLoading } = useFetchById(sidebarId);
  const { data: nav, loading: navLoading } = useFetchById(navId);
  const { data: modal, loading: modalLoading } = useFetchById(modalId);

  // 渲染逻辑：可以单独处理每个数据的加载/错误状态
}

这种方案更模块化，每个数据的状态完全独立，代码可读性和复用性更强，后续维护也更方便。

注意事项 #

• 一定要处理竞态问题：使用AbortController在组件卸载或ID变化时取消旧请求，避免旧请求返回覆盖新状态。
• 增加空ID判断：避免传入空ID时发起无效请求。
• 添加错误处理：不要让一个请求失败影响其他请求的执行，同时方便排查问题。

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