Question

我正在从vuex商店中检索对象的数组，并且试图在我的一个组件中对该数组进行排序（我不想在商店中对数组进行排序）。但是我的浏览器出现错误infinite update loop in a component render function。这里发生了什么，我该如何解决？

<template>
  <div
    v-for="(item, i) in itemList">
    {{item.description}}
  </div>
</template>


computed: Object.assign({},
  mapGetters({
    currentItemList: "item/current",
  }),
  {
   itemList() {
     if(this.currentItemList != undefined) {
       return this.currentItemList.sort(function(a, b) {
           var textA = a.description.toUpperCase()
           var textB = b.description.toUpperCase()
           return (textA < textB) ? -1 : (textA > textB) ? 1 : 0
         })
      }
      else {
        return []
      }
    },
  }
)

Answer 1

sort将在适当位置更改数组。您可以在组件中创建项目列表的本地副本，然后对副本进行排序以避免副作用：

itemList() {
  if(this.currentItemList != undefined) {
    var localItemList = JSON.parse(JSON.stringify(this.currentItemList))
    return localItemList.sort(...)

Answer 2

通过this.currentItemList.sort，您正在对计算属性中的反应数据进行突变-这将触发组件始终重新渲染...不要对计算属性中的数据进行突变。相反，请确保对数组的副本进行排序：this.currentItemList.slice().sort(...)

vuex存储中的排序数组（无限渲染警告）

2 个答案: