在map中调用fetch出现Maximum call stack size exceeded问题求助

问题原因 #

你遇到的「Maximum call stack size exceeded」错误，结合代码来看核心问题有两个：

1. 异步操作未正确处理：map回调里直接执行异步的execute，但没有等待异步结果，导致treeData实际是一个充满undefined的数组，后续逻辑可能因错误数据触发无限循环或重复调用，最终栈溢出。
2. 数据构建逻辑错误：内部嵌套的map同样没有处理异步返回的Promise，children和grandChildren数组无法正确获取异步请求结果，而且孙节点的title错误使用了父节点的child.name，会导致数据混乱。

另外，你期望返回非Promise的树形结构，但异步请求不可能同步返回结果——所有依赖网络请求的数据必须通过异步方式获取，正确做法是让函数返回Promise<树形结构数组>，调用时通过await获取最终结果。

修正后的代码 #

// 将整个函数声明为async
async function getTreeData(parents: any[]) {
  // 用Promise.all等待所有父节点的异步操作完成
  const treeData = await Promise.all(parents.map(async (el) => {
    // 等待子节点请求结果
    const { data } = await execute({
      url: "/api/children",
      method: "POST",
      data: { id: el.id },
    });

    // 等待所有子节点的异步操作完成
    const children = await Promise.all(data.item1.map(async (child: any) => {
      // 等待孙节点请求结果
      const res = await execute({
        url: "/api/children",
        method: "POST",
        data: { id: child.id },
      });

      // 构建孙节点数组
      const grandChildren = res.data.item1.map((grandChild: any) => ({
        title: grandChild.name, // 修正为孙节点自身的name
        key: grandChild.id,
        id: grandChild.id,
        children: [],
      }));

      // 返回子节点结构
      return {
        title: child.name,
        key: child.id,
        id: child.id,
        children: grandChildren,
      };
    }));

    // 返回父节点结构
    return {
      title: el.name,
      key: el.id,
      id: el.id,
      children: children,
    };
  }));

  return treeData;
}

// 调用示例
// const result = await getTreeData(parents);

关键修正点 #

• 用async/await替代嵌套then，简化异步逻辑，避免回调地狱。
• 配合Promise.all处理数组异步操作，确保所有子节点请求完成后再构建树形结构。
• 修正孙节点title的错误赋值，保证数据正确性。
• 明确函数为async类型，返回Promise，调用时通过await获取最终的同步树形数据。

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