vue for循环中的saldo计数器给出无限循环错误

Posted 2023-02-22

【中文标题】vue for循环中的saldo计数器给出无限循环错误

【英文标题】：saldo counter in vue for loop gives infinite loop error

【发布时间】：2021-10-10 21:33:49

【问题描述】：

（有一个 PD）

我有一个显示帐户变动的页面。 在数据库中有日期和金额。 每个月初都有一张单独的桌子保存萨尔多。 此外，该表可按开始和结束日期进行过滤

来自银行帐户移动的过滤条目具有日期和金额，这工作正常。 我现在正在尝试将其与帐户-saldo 融合。 开始很简单：从 DB 中获取并显示 startSaldo

在渲染端，我有一个 v-for 循环遍历每个动作 奇怪的是我在一个意想不到的方法上得到了一个无限循环

渲染：

<tr v-for="movimiento in this.filteredEntries">
                ...

                <td>calculateSaldo(movimiento.cobro_id,movimiento.monto)</td>
                ...
</tr>

saldo 是一个简单的属性（不是计算出来的），目前以 0 开头，仅在方法中使用

这就是方法

calculateSaldo(cobro_id,monto)
            //cobro_id and monto are 
            return 0; // <<<< without this I get the infinite loop error. But why?
            if (cobro_id)
                this.saldo=this.saldo+parseInt(monto);
             else 
                this.saldo= this.saldo-parseInt(monto);
            
            console.log(this.saldo);
            // <<< a return 0 here produces also an infinite loop error
            return this.saldo;
        ,

我不知道该往哪里看……

PD：经过更多测试后，显然，一旦我为 this.saldo 重新分配了一个值，就会启动重新渲染。如何克服它？

PPD：显然，在到达最后一个（按日期）过滤的实体后会发生重新渲染

【问题讨论】：

当您在状态中重新分配一个值时，在您的示例中this.saldo 渲染触发。你能检查一下这个答案吗：***.com/a/43153274/1977031

【参考方案1】：

如here 所述，当您在状态渲染中重新分配一个值时触发并导致无限循环。

所以我尝试重新创建您的组件的基本版本，我认为您可以在 filteredEntries 计算属性上解决此问题。

computed: 
    filteredEntries() 
      let lastSaldo = this.saldo;
      return this.entries.map((item) => 
        if (item.cobro_id) 
          lastSaldo = parseInt(lastSaldo) + parseInt(item.monto);
         else 
          lastSaldo = parseInt(lastSaldo) - parseInt(item.monto);
        
        item.saldo = lastSaldo;
        return item;
      );
    ,
  ,

我重新创建您的组件示例的完整代码：

<template>
  <div>
    <table>
      <tr v-for="(movimiento, index) in this.filteredEntries" :key="index">
        <td> movimiento.saldo </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default 
  data() 
    return 
      saldo: 0,
      entries: [
        
          cobro_id: null,
          monto: 5,
        ,
        
          cobro_id: 2,
          monto: 10,
        ,
        
          cobro_id: null,
          monto: 5,
        ,
        
          cobro_id: 1,
          monto: 25,
        ,
      ],
    ;
  ,
  computed: 
    filteredEntries() 
      let lastSaldo = this.saldo;
      return this.entries.map((item) => 
        if (item.cobro_id) 
          lastSaldo = parseInt(lastSaldo) + parseInt(item.monto);
         else 
          lastSaldo = parseInt(lastSaldo) - parseInt(item.monto);
        
        item.saldo = lastSaldo;
        return item;
      );
    ,
  ,
;
</script>

【讨论】：

它似乎工作得很好......直到我编写了 let saldo = getSaldo(startDate) 因为它是一个基于可选日期过滤条目的 vue 组件，所以每当日期更改时，实体都是过滤后，必须从 DB 中获取新的 Saldo。似乎 axios 调用中的延迟导致 lastSaldo 未定义。关于如何在 axios 调用得到他的答案后触发返回条目的任何想法？我最终是否需要将此 vue 组件分成两部分？一个用于日期和一个子组件仅用于处理条目？