Question

我的反应组件的状态如下：

this.state = {
            categoryGroups: [
                {
                    groupName: 'Immediate Obligations',
                    budgeted: '5,000.00',
                    activity: '3,275.76',
                    subcategories: [
                        {
                            category: 'food',
                            budgeted: '500.00',
                            activity: '300.76'
                        },
                        {
                            category: 'rent',
                            budgeted: '1,000.00',
                            activity: '1,000.00'
                        }
                    ]
                },
                {
                    groupName: 'True Expenses',
                    budgeted: '2,000.00',
                    activity: '1,000.33',
                    subcategories: [
                        {
                            category: 'Car Insurance',
                            budgeted: '60.00',
                            activity: '60.00'
                        },
                        {
                            category: 'Gas',
                            budgeted: '100.00',
                            activity: '34.50'
                        }
                    ]
                }
            ]
        }

我想查找每个类别组中所有子类别的总预算金额。我怎么能这样做？

Answer 1

您可以通过简单的for循环实现此目的。但是JavaScript在数组上提供了一些不错的函数。

请参阅Mozilla's Documentation。

总结一下，Array.prototype.reduce浮现在脑海中。你可以使用它，例如如下：

this.state.categoryGroups.reduce(sumCategoryGroups, 0);

function sumCategoryGroups(sum, categoryGroup) {
    return sum + categoryGroup.subcategories.reduce(sumSubCategories, 0);
}

function sumSubCategories(sum, subCategory) {
    return sum + subCategory.budgeted;
}

修改由于我没有意识到预算金额存储为字符串，因此上述解决方案可能不会执行提出问题的用户所要求的内容。

根据您可以确定的数字字符串始终以相同的方式格式化，您可以使用以下内容：

function budgetToNumber(budgetString) { return Number(budgetString.replace(/,/g, '')); }

将先前的代码更改为：

this.state.categoryGroups.reduce(sumCategoryGroups, 0); function sumCategoryGroups(sum, categoryGroup) { return sum + categoryGroup.subcategories.reduce(sumSubCategories, 0); } function sumSubCategories(sum, subCategory) { return sum + budgetToNumber(subCategory.budgeted); }

注意但是，有很多方法可能会造成危险;即当预算金额的格式改变时。

Answer 2

您可以映射每个子类别并减少这两个子类别：

＆＃13;

const categoryGroups = [{
    groupName: 'Immediate Obligations',
    budgeted: '5,000.00',
    activity: '3,275.76',
    subcategories: [{
        category: 'food',
        budgeted: '500.00',
        activity: '300.76'
      },
      {
        category: 'rent',
        budgeted: '1,000.00',
        activity: '1,000.00'
      }
    ]
  },
  {
    groupName: 'True Expenses',
    budgeted: '2,000.00',
    activity: '1,000.33',
    subcategories: [{
        category: 'Car Insurance',
        budgeted: '60.00',
        activity: '60.00'
      },
      {
        category: 'Gas',
        budgeted: '100.00',
        activity: '34.50'
      }
    ]
  }
];

const subCategories = categoryGroups.map(({ subcategories }) => {
  return subcategories.reduce((prev, { budgeted }) => {
    return +prev['budgeted'].replace(/,/g, '') +  +budgeted.replace(/,/g, '');
  });
});

const total = subCategories.reduce((prev, next) => prev + next);

console.log(total);

＆＃13;

在对象数组中对嵌套数组求和

2 个答案: