Vue无限循环......在方法中

Posted 2021-04-06

我收到这个警告[Vue warn]: You may have an infinite update loop in a component render function.，我想我知道它为什么会发生。

我的用例：我有一个循环，我将一个带索引的对象传递给一个vue方法。由于计算机不能有参数，所以我不能使用它。剩下的选择是方法。

我想在循环达到奇数后一周将日期增加。只有1和2是例外。

这是我一直试图使用的代码

getDate(date, i){
      var currentDate=date.startingDate

      var res=currentDate
      if(i>2){
        // change the date 
         if(i%2==0){
            //use previous dates 
            res=date.startingDate
         }else{
            // increase the date by one week from the last week 
            var currDate = new Date(currentDate)
            var d=currDate.setDate(currDate.getDate() + 7);
            var d=new Date(d)
            var newDate=d.toISOString()
            var dateArr=newDate.split("T")
            var res=dateArr[0]
            console.log('ok')

            date.startingDate=res // this line is the problem and causes the infinite loop problem.  

         }
      }

      return res

  }

这里date.startingDate总是固定的日期。

样本输入

date.startingDate='2018-05-11'

所以当qazxsw poi输出是qazxsw poi

当qazxsw poi日期应该增加一周，所以预期的产量是qazxsw poi

问题是i=1, and 2 (i always starts from 1)我无法将日期重置为此日期。但我必须将其重置为增加的新日期才能在date.startingDate='2018-05-11'时添加新日期。

以其他方式提出任何建议的解决方案，或者可以通过不同方式改进此代码？任何帮助将受到高度赞赏。

非常感谢您的时间。

编辑

i=3,4

答案

好吧，似乎无法避免这个问题。所以我改变了方法。我没有在填充厄运时更新日期，相反，我使用了vuex存储和getter。从getter返回时，我在那里更改了值，一旦所有日期更改完成，我只返回数组。它工作得很好。这是我的代码

当我添加动态条件时，这个代码在逻辑方面有点改变。但概念是一样的。

2018-05-17

希望这种方法有助于他人。