按层级统计用户存款总额求助（附错误React代码）

我有最多5层、最少2-3层的多层级子用户结构，需要遍历各层级统计每一层用户的存款总额，期望输出结果为[300, 300, 300, 300]。但当前实现的React递归代码无法得到正确结果，请求调试。

示例数据 #

{
  "children": [
    {
      "id": "ddf86d60-a607-4a4e-a7f9-d96013ee7070",
      "name": "Rick Rich",
      "deposit": 100,
      "bonus": 100,
      "referralChildDeposit": 0,
      "children": [
        {
          "id": "25de2e98-eb2d-41f4-b225-3069f942b284",
          "name": "Rick Rich",
          "deposit": 100,
          "bonus": 100,
          "referralChildDeposit": 0,
          "children": [
            {
              "id": "376b202e-d44f-4402-9560-8498c855d05e",
              "name": "Rick Rich",
              "deposit": 100,
              "bonus": 100,
              "referralChildDeposit": 0,
              "children": [
                {
                  "id": "042681be-f521-40af-a1dd-a1591700f8e0",
                  "name": "Rick Rich",
                  "deposit": 100,
                  "bonus": 100,
                  "referralChildDeposit": 0
                },
                {
                  "id": "997e02a7-1bb7-473f-8ff8-5eb76d8d309b",
                  "name": "Rick Rich",
                  "deposit": 100,
                  "bonus": 100,
                  "referralChildDeposit": 0
                },
                {
                  "id": "b969c5b8-2d01-4872-8063-8e9ca7474a13",
                  "name": "Rick Rich",
                  "deposit": 100,
                  "bonus": 100,
                  "referralChildDeposit": 0
                }
              ]
            },
            {
              "id": "d8252898-46b8-4cf4-a545-06e98e6dccf1",
              "name": "Rick Rich",
              "deposit": 100,
              "bonus": 100,
              "referralChildDeposit": 0,
              "children": []
            },
            {
              "id": "0d6ae01b-ccda-4de3-83ca-d2f70dd0897c",
              "name": "Rick Rich",
              "deposit": 100,
              "bonus": 100,
              "referralChildDeposit": 0,
              "children": []
            }
          ]
        },
        {
          "id": "0ee1ea8f-790f-4767-b280-c5cddfe9c630",
          "name": "Rick Rich",
          "deposit": 100,
          "bonus": 100,
          "referralChildDeposit": 0,
          "children": []
        },
        {
          "id": "eb530dbf-9026-4cb8-a3fa-d02133ced42d",
          "name": "Rick Rich",
          "deposit": 100,
          "bonus": 100,
          "referralChildDeposit": 0,
          "children": []
        }
      ]
    },
    {
      "id": "d1022d3c-25af-461c-af91-cbc64147f92c",
      "name": "Rick Rich",
      "deposit": 100,
      "bonus": 100,
      "referralChildDeposit": 0,
      "children": []
    },
    {
      "id": "5927f160-e4ad-4b13-a47e-b1d4b0687897",
      "name": "Rick Rich",
      "deposit": 0,
      "bonus": 100,
      "referralChildDeposit": 0,
      "children": []
    }
  ]
}

错误代码 #

import { useState } from 'react';

type Children = {
  id: string;
  name: string;
  deposit: number;
  bonus: number;
  referralChildDeposit: number;
  children?: Children[];
};

const YourComponent = () => {
  const [userDeposit, setUserDeposit] = useState<number[]>([]);

  const iterateOfChildrenDeposit = (
    children: Children[],
    result: number[] = [],
  ): void => {
    children.forEach((node: Children) => {
      result.push(node.deposit);
      if (node.children) {
        iterateOfChildren(node.children, result);
      }
    });

    setUserDeposit(result);
  };

  // 假设这里调用了函数，比如在useEffect里
  // iterateOfChildrenDeposit(yourData.children);

  console.log('userDeposit', userDeposit);

  return <div>...</div>;
};

export default YourComponent;

问题分析与修复方案 #

错误原因 #

1. 逻辑方向错误：当前代码把每个用户的存款单独加入数组，没有按层级统计总额，最终得到的是所有用户存款的列表，而非层级总额数组。
2. 递归逻辑混乱：没有区分层级，递归时直接处理单个节点的子节点，没有收集当前层级所有节点的子节点作为下一层的整体。
3. 状态更新时机错误：setUserDeposit放在递归函数内部，每次递归都会触发状态更新，导致状态被多次覆盖，且未等到完整计算完成就更新。

修复后的代码 #

import { useState, useEffect } from 'react';

type Children = {
  id: string;
  name: string;
  deposit: number;
  bonus: number;
  referralChildDeposit: number;
  children?: Children[];
};

const YourComponent = () => {
  const [userDeposit, setUserDeposit] = useState<number[]>([]);

  // 模拟你的用户数据
  const userData = {
    children: [/* 填入上面的示例数据 */]
  };

  // 按层级统计存款总额的递归函数
  const calculateLevelDeposits = (nodes: Children[], result: number[] = []): number[] => {
    // 计算当前层级的存款总和
    const currentLevelTotal = nodes.reduce((sum, node) => sum + node.deposit, 0);
    result.push(currentLevelTotal);

    // 收集当前层级所有节点的子节点，作为下一层的节点列表
    const nextLevelNodes = nodes.flatMap(node => node.children || []);

    // 如果下一层有节点，继续递归；否则返回结果
    if (nextLevelNodes.length > 0) {
      return calculateLevelDeposits(nextLevelNodes, result);
    }
    return result;
  };

  useEffect(() => {
    if (userData.children) {
      const levelTotals = calculateLevelDeposits(userData.children);
      setUserDeposit(levelTotals);
    }
  }, [userData]);

  console.log('userDeposit', userDeposit); // 输出 [300, 300, 300, 300]

  return <div>...</div>;
};

export default YourComponent;

代码说明 #

1. 层级统计逻辑：每次递归先计算当前层级所有用户的存款总和，加入结果数组。
2. 子节点收集：用flatMap把当前层级所有节点的子节点合并成下一层的节点列表，保证下一层是当前所有节点的直接子级。
3. 状态更新时机：在useEffect中调用计算函数，等所有层级计算完成后，再一次性更新状态，避免多次触发状态更新。
4. 边界处理：判断下一层节点是否为空，为空则终止递归，返回最终结果。

验证示例数据 #

• 第一层：3个用户，存款总和100 + 100 + 0 = 300
• 第二层：第一个用户的3个子节点，存款总和100 + 100 + 100 = 300
• 第三层：第一个子节点的3个子节点，存款总和100 + 100 + 100 = 300
• 第四层：第一个子节点的3个子节点，存款总和100 + 100 + 100 = 300

最终结果正好符合期望的[300, 300, 300, 300]。

内容的提问来源于stack exchange，提问作者Алексей Синельник