ReactJS按描述分组计算credit总和：代码问题排查

我有一组对象数组，想要按description字段进行分组，并计算对应credit字段的总和，但自己写的代码得不到正确结果，请问代码哪里有问题？

我的代码 #

var result1 = []
entries.reduce((res, value) => {
    if (!res[value.description]) {
        res[value.description] = { description: value.description, credit: 0 }
        result1.push(res[value.description])
    }
    
    res[value.description].credit = (parseFloat(value.credit) +
    parseFloat(res[value.description].credit)).toFixed(2)
    
    return res
    
}, {});


let analysisByDescStr = result1.map((str) => (
    <div>
        {str.description || ""} =
        {str.credit || ""}
    </div>
));

对象数组 #

[
    {description: 'GOOGLE *Google', credit: '1.99', category: 'TELECOM'},
    {description: 'AMZN Mktp #0998', credit: '20.65', category: 'MERCHANDISE'},
    {description: 'AMZN Mktp #06778', credit: '70.68', category: 'MERCHANDISE'},
    {description: 'OLIVE YOUNG', credit: '60.03', category: 'MERCHANDISE'},
    {description: 'SAFEWAY #0982', credit: '22.97', category: 'GROCERY'},
    {description: 'PEET\'S #11702', credit: '7.05', category: 'COFFEE'},
    {description: 'SAFEWAY #0983', credit: '20.00', category: 'GROCERY'},
    {description: 'AMZN Mktp #0234', credit: '-18.62', category: 'MERCHANDISE'}
]

预期结果 #

AMZN Mktp=72.71
GOOGLE *Google=1.99
OLIVE YOUNG=60.03
PEET'S=7.05
SAFEWAY=42.97

问题分析与修正 #

你的代码存在三个核心问题：

1. 分组逻辑不符合预期：你直接使用完整的description作为分组键，但预期结果需要将带编号（比如#0998）的同前缀项归为一组，比如AMZN Mktp #0998和AMZN Mktp #06778要合并到AMZN Mktp组。
2. 累加时的类型错误：toFixed()返回的是字符串，后续累加时需要再次parseFloat，不仅冗余，还可能引发精度问题。
3. 结果收集冗余：额外维护result1数组没必要，直接从reduce的结果对象转换即可。

修正后的代码

// 提取统一的分组键（去掉#及后面的编号）
const getGroupKey = (desc) => desc.split('#')[0].trim();

// 分组并累加credit
const groupedData = entries.reduce((res, item) => {
    const key = getGroupKey(item.description);
    if (!res[key]) {
        res[key] = { description: key, credit: 0 };
    }
    // 保持数字类型累加，避免字符串操作问题
    res[key].credit += parseFloat(item.credit);
    return res;
}, {});

// 转换为数组并格式化credit为两位小数
const result1 = Object.values(groupedData).map(item => ({
    ...item,
    credit: item.credit.toFixed(2)
}));

// React渲染部分
const analysisByDescStr = result1.map((item, index) => (
    <div key={index}>
        {item.description || ""} = {item.credit || ""}
    </div>
));

修正说明

• 新增getGroupKey函数，从description中提取统一的分组标识，确保同前缀项被正确分组。
• 累加时保持credit为数字类型，最后再统一用toFixed(2)格式化，避免字符串累加的问题。
• 使用Object.values()直接从分组对象中提取结果数组，去掉冗余的result1维护逻辑，代码更简洁。

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