如何提升API数据转换函数复用性？支持按roleId/projectId分组

针对现有按roleIds分组的树形表格数据转换逻辑，我们可以通过抽离通用分组字段参数的方式，实现同时支持roleIds和projectIds分组的复用性代码，避免冗余复制。

重构后的通用代码实现 #

const apiData = [
  {
    email: "alyssayo@xxx.com",
    permissionIds: null,
    roleIds: ["raa", "baa", "caa"],
    projectIds: ["1aa", "3aa"]
  },
  {
    email: "chiuewww@xxx.com",
    permissionIds: null,
    roleIds: ["baa", "caa"],
    projectIds: ["1aa", "2aa", "3aa"]
  },
  {
    email: "lalaqq@xxx.com",
    permissionIds: null,
    roleIds: ["caa"],
    projectIds: ["1aa"]
  },
  {
    email: "sqssq@xxx.com",
    permissionIds: null,
    roleIds: [],
    projectIds: []
  }
];

// 通用树形表格数据转换函数，接收原始数据和分组字段名
const createTreeTableData = (data, groupField) => {
  // 1. 按指定字段拆分原始数据
  const transformed = data.reduce((arr, item) => {
    const ids = item[groupField] || [];
    const formattedItems = ids.map(id => ({
      [groupField]: id,
      children: [{ ...item, [groupField]: id }]
    }));
    return [...arr, ...formattedItems];
  }, []);

  // 2. 按指定字段分组合并子节点
  const groupByField = (arr) => {
    if (!Array.isArray(arr)) return [];
    return arr.reduce((result, current) => {
      const existing = result.find(item => item[groupField] === current[groupField]);
      if (existing) {
        existing.children.push(...current.children);
      } else {
        result.push(current);
      }
      return result;
    }, []);
  };

  const groupedData = groupByField(transformed);

  // 3. 为节点添加唯一key
  let key = 1;
  groupedData.forEach(item => {
    item.key = key++;
    item.children.forEach(child => {
      child.key = key++;
    });
  });

  return groupedData;
};

// 按roleIds分组调用
const roleGroupedData = createTreeTableData(apiData, 'roleIds');
// 按projectIds分组调用
const projectGroupedData = createTreeTableData(apiData, 'projectIds');

// 渲染时直接使用对应分组数据
// setData(roleGroupedData);
// setData(projectGroupedData);

转换结果验证 #

按roleIds分组输出

[
  {
    "roleIds": "raa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": "raa",
        "projectIds": ["1aa", "3aa"],
        "key": 2
      }
    ],
    "key": 1
  },
  {
    "roleIds": "baa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": "baa",
        "projectIds": ["1aa", "3aa"],
        "key": 4
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": "baa",
        "projectIds": ["1aa", "2aa", "3aa"],
        "key": 5
      }
    ],
    "key": 3
  },
  {
    "roleIds": "caa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": "caa",
        "projectIds": ["1aa", "3aa"],
        "key": 7
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": "caa",
        "projectIds": ["1aa", "2aa", "3aa"],
        "key": 8
      },
      {
        "email": "lalaqq@xxx.com",
        "permissionIds": null,
        "roleIds": "caa",
        "projectIds": ["1aa"],
        "key": 9
      }
    ],
    "key": 6
  }
]

按projectIds分组输出

[
  {
    "projectIds": "1aa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": ["raa", "baa", "caa"],
        "projectIds": "1aa",
        "key": 2
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": ["baa", "caa"],
        "projectIds": "1aa",
        "key": 3
      },
      {
        "email": "lalaqq@xxx.com",
        "permissionIds": null,
        "roleIds": ["caa"],
        "projectIds": "1aa",
        "key": 4
      }
    ],
    "key": 1
  },
  {
    "projectIds": "3aa",
    "children": [
      {
        "email": "alyssayo@xxx.com",
        "permissionIds": null,
        "roleIds": ["raa", "baa", "caa"],
        "projectIds": "3aa",
        "key": 6
      },
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": ["baa", "caa"],
        "projectIds": "3aa",
        "key": 7
      }
    ],
    "key": 5
  },
  {
    "projectIds": "2aa",
    "children": [
      {
        "email": "chiuewww@xxx.com",
        "permissionIds": null,
        "roleIds": ["baa", "caa"],
        "projectIds": "2aa",
        "key": 9
      }
    ],
    "key": 8
  }
]

优化说明 #

• 核心逻辑全部封装在createTreeTableData函数中，通过传入groupField参数（roleIds或projectIds）实现多维度分组切换
• 使用动态属性访问item[groupField]替代硬编码字段名，保证逻辑通用性
• 保留了原代码的空数组过滤、节点key生成等逻辑，输出结果与原需求完全匹配
• 后续新增其他分组维度（如permissionIds）时，只需调用函数并传入对应字段名即可，无需修改核心逻辑

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