如何在react js中按顺序计算嵌套数组中的多个对象

import React from "react";

function NestedArrayCalculation() {
  // 嵌套数组数据
  const data = [
    {
      id: 1,
      value: 5,
      children: [
        {
          id: 2,
          value: 3,
          children: [
            {
              id: 3,
              value: 2,
              children: []
            },
            {
              id: 4,
              value: 4,
              children: []
            }
          ]
        },
        {
          id: 5,
          value: 6,
          children: []
        }
      ]
    },
    {
      id: 6,
      value: 7,
      children: [
        {
          id: 7,
          value: 1,
          children: []
        }
      ]
    }
  ];

  // 递归计算嵌套数组中的多个对象
  const calculate = (data) => {
    let result = 0;

    data.forEach((item) => {
      result += item.value;

      if (item.children.length > 0) {
        result += calculate(item.children);
      }
    });

    return result;
  };

  // 调用计算函数
  const total = calculate(data);

  return (
    <div>
      <h1>Total: {total}</h1>
    </div>
  );
}

export default NestedArrayCalculation;