getTotals()方法失效求助：财务APP收支余额无法实时更新

问题核心原因 #

你的getTotals()方法失效主要有两个关键问题：

1. filter回调未返回判断结果：两个filter的箭头函数中，判断条件后没有return语句，导致筛选逻辑完全不生效，最终newReceitas和newDespesas都是空数组。
2. 用HTML字符串作为收支标识不可靠：直接匹配<i>标签的转义字符串，一旦UI结构（图标类名、版本）变化，判断逻辑就会失效，且代码可读性极差。

修复方案 #

方案一：优化数据结构（推荐） #

给每个数据项添加专门的类型字段（如tipo）区分收支，替代用HTML字符串判断的逻辑：

// 假设this.valores中的每个数据项结构为：{ valor: "150", tipo: "receita" } 或 { valor: "80", tipo: "despesa" }
normalizeNumbers(value) {
    return value.toLocaleString("pt-BR", {
        style: "currency",
        currency: "BRL"
    });
}

getTotals() {
    // 筛选收入项并转换为数字
    const receitasValores = this.valores
        .filter(item => item.tipo === "receita")
        .map(item => Number(item.valor) || 0); // 兜底处理非数字值
    
    // 筛选支出项并转换为数字
    const despesasValores = this.valores
        .filter(item => item.tipo === "despesa")
        .map(item => Number(item.valor) || 0);
    
    // 计算总和
    const totalReceitas = receitasValores.reduce((acc, curr) => acc + curr, 0);
    const totalDespesas = despesasValores.reduce((acc, curr) => acc + curr, 0);
    const totalSaldo = totalReceitas - totalDespesas;
    
    // 更新DOM元素
    this.receitas.innerText = this.normalizeNumbers(totalReceitas);
    this.despesas.innerText = this.normalizeNumbers(totalDespesas);
    this.saldo.innerText = this.normalizeNumbers(totalSaldo);
}

方案二：临时修复现有逻辑（不推荐，仅应急） #

如果暂时无法修改数据结构，先修复filter的return问题，并清理冗余的类型转换：

normalizeNumbers(value) {
    return value.toLocaleString("pt-BR", {
        style: "currency",
        currency: "BRL"
    });
}

getTotals() {
    // 修复filter回调的return语句
    const newReceitas = this.valores.filter(({ checked }) => {
        return checked === '<i class="fa-sharp fa-solid fa-arrow-up arrowUp-icon"></i>';
    }).map(({ valor }) => +valor || 0);
    
    const newDespesas = this.valores.filter(({ checked }) => {
        return checked === '<i class="fa-sharp fa-solid fa-arrow-down arrowDown-icon"></i>';
    }).map(({ valor }) => +valor || 0);
    
    // 计算总和
    const totalReceitas = newReceitas.reduce((acc, curr) => acc + curr, 0);
    const totalDespesas = newDespesas.reduce((acc, curr) => acc + curr, 0);
    const totalSaldo = totalReceitas - totalDespesas;
    
    // 去掉冗余的类型转换
    this.receitas.innerText = this.normalizeNumbers(totalReceitas);
    this.despesas.innerText = this.normalizeNumbers(totalDespesas);
    this.saldo.innerText = this.normalizeNumbers(totalSaldo);
}

关键注意事项 #

• 务必在用户插入新数据后主动调用getTotals()，比如在表单提交成功、数据添加到this.valores数组后立即执行该方法。
• 推荐始终使用方案一的类型字段标识收支，避免UI和业务逻辑耦合，提升代码可维护性。
• 对valor字段做数值校验，避免非数字值导致计算错误，比如用Number(item.valor) || 0兜底。

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