控制台上的 Vue 警告:组件渲染函数中可能存在无限更新循环

Posted

技术标签:

【中文标题】控制台上的 Vue 警告:组件渲染函数中可能存在无限更新循环【英文标题】:Vue Warning on Console : You may have an infinite update loop in a component render function 【发布时间】:2021-03-21 13:08:03 【问题描述】:

我是一名计算机科学专业的新生,我有一个关于 Vue.js 的学校项目要做。 它正在工作,但它显示以下警告:

[Vue 警告]:组件渲染函数中可能存在无限更新循环。

英语不是我的第一语言,所以如果我提前写错了,我很抱歉,但我会尽力解释我在项目上要做的事情。

我必须创建一个照片网格/相册,每行显示不超过 3 张照片。像这样的东西: Example of how it has to look

代码是这样的:

  <template>
<v-container>
  <!-- 'v-container' est´substituindo ' div class="clubes-lista" '-->
  <div class="grid-photo">
    <v-container class="grey lighten-3">
      <v-row
        v-for="index in numberLines()"
        :key="index"
        class="grey lighten-3"
      >
        <v-col v-for="n in 3" :key="n" cols="4">
          <v-card v-if="numberPhotos > checkInsertedAllPhotos()" outlined>
            <v-img
              src="https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg"
              
            >
            </v-img>
            <div class="photo-subtitle">
              <v-icon size="15">mdi-heart-outline</v-icon>
              <p>The Cockatiel</p>
            </div>
          </v-card>
          <v-card v-else></v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</v-container>
<script>
export default 
name: "PhotoGrid",

data() 
  return 
    listPhotosOnGrid: [],
    numberPhotos: 0,
    numberTotalLines: 0,
    countPhotos: 0,
  ;
,

computed: ,

methods: 
  createPhotosList() 
    var listPhotos = [];
    for (var i = 0; i < 10; i++) 
      var aux = 
        id: i + 1,
        src:
          "https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg",
        subtitle: "The cockatiel",
      ;

      listPhotos.push(aux);
    

    this.listPhotosOnGrid = listPhotos;
    this.numberPhotos = listPhotos.length;
  ,

  numberLines() 
    this.createPhotosList();
    var photosMultipleThree = this.numberPhotos;

    while (photosMultipleThree % 3 != 0) 
      photosMultipleThree = photosMultipleThree + 1;
    
    this.numberTotalLines = photosMultipleThree / 3;

    return photosMultipleThree / 3;
  ,

  checkInsertedAllPhotos() 
    var cont = this.countPhotos++;
    return cont;
  ,
,

;

<style scoped>
.photo-subtitle 
  font-size: 10px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: flex-start;
  padding: 0;
  margin-top: 10px;


.photo-subtitle p 
  margin-left: 5px;

所以...试图弄清楚发生了什么,我认为警告来自以下行:

<v-card v-if="numberPhotos > checkInsertedAllPhotos()" outlined>

if 是因为它不能显示比给出的更多的图像。例如,每行显示 3 张照片,所以如果我没有多张 os 3 的照片,我不想填充最后一行的所有列,只显示所有照片所必需的。

但我只是认为,根据一些测试,我不确定警告是否来自这一行。

代码有效,但我觉得有些不对劲。 (它实际上是部分工作的,因为我仍然不知道如何从数组中获取要显示的信息,所以它只循环相同的东西

我想学习如何做对。

那么谁能告诉我我可以做些什么来使警告消失,或者我是否必须更改所有内容,并创建一个新的逻辑以使其正常工作。

我只是想学习。

非常感谢,如果这是一个愚蠢的问题,或者如果我把一切都弄错了,再次抱歉,呵呵。 如果我写错了,请见谅。

:)

【问题讨论】:

首先,1.这个函数checkInsertedAllPhotos()总是返回1,因为你只增加1一次。 2.v-for="index in numberLines()"这里的numberLines()是一个数字,因为你返回photosMultipleThree / 3。你不能循环一个数字。 3.不建议在 v-for 中使用 v-if。相反,先使用计算属性过滤数组,然后循环过滤数组 【参考方案1】:

我查看了您的代码。首先,我建议您停止使用var 关键字,而改用letconst(您可以查看问题here 并查看基于这些关键字的范围,var 范围现在非常不寻常,它会导致一些问题)。

关于无限更新循环的特定问题,问题来自您的checkInsertedAllPhotos 函数。我会这样解释:

在v-if Vue内部机制中,通过触发checkInsertedAllPhotos函数来检查元素是否应该被渲染

当执行函数checkInsertedAllPhotos时,数据countPhotos会增加(顺便说一句,这样做会更好

this.countPhotos ++; return this.countPhotos;

由于数据已被修改,Vue 正在触发页面的重新渲染

由于有一个重新渲染,Vue 在 v-if 中检查是否应该通过触发函数 checkInsertedAllPhotos 来渲染元素。

如果 Vue 不阻止它,它可能是无限的!

我确实建议您重新设计一下您的逻辑。然而,一个快速解决您的问题的方法是,当您检查列表中的索引时:例如,如果您想显示 listPhotosOnGrid[i],您检查 i&lt;numberPhotos 是否带有 v-if 并在 v-else 中如果需要,可以显示其他内容。

我还认为,通过利用 css(例如 css-grid),您可以编写更简单的代码。你可以有这么简单的东西:

<div v-for="n in 100">
    <img v-bind:src="`https://i.pinimg.com/photos/$n.png`">
</div>

和一些 CSS 来设置它的样式,每行只有 3 个项目。如果你想了解 css-grid,我会推荐 Mozzila documentation 或 following tutoriel。

现在我很难理解确切的问题,因为里面有多个主题要解决,但我希望我对无限循环的解释对你有帮助!

在学习 Vue 时玩得开心!

【讨论】:

【参考方案2】:

感谢所有帮助过我的人,你们确实帮助了我!!!!

对不起,我今天只能回答。 我认为我能够在代码上做得更好,我改变了很多,特别是代码的逻辑。而且我认为它可以变得更好,但肯定我已经取得了很大的进步,呵呵。

我有点不愿意发布这个问题,因为即使在我发布它的时候我还不确定该怎么做,但我有点觉得这很愚蠢(就像一个愚蠢的问题),而且我只会花时间在我的问题上停下来的任何人。但我只得到了惊人的答案,每个人都很有耐心,所以非常感谢!!

(我也是 *** 的新手,所以我希望我做的一切都是正确的,呵呵)

【讨论】:

以上是关于控制台上的 Vue 警告:组件渲染函数中可能存在无限更新循环的主要内容,如果未能解决你的问题,请参考以下文章

[Vue 警告]:无法挂载组件:未定义模板或渲染函数。错误

构建 Vue 项目时出现错误“无法安装组件:未定义模板或渲染函数”

尝试根据值设置不同的数组。错误:组件渲染函数中可能存在无限更新循环

Vue.js 警告您可能在组件渲染函数中有无限更新循环

如何修复或抑制误报“您可能在组件渲染函数中有无限更新循环”Vue 警告

vue 错误:组件渲染函数中的无限更新循环