无限更新循环

Question

我正在尝试在Vue.js中构建一个可重用的Image Loader组件，它应该：

1. 管理自己的缩略图数据
2. 从父母那里取src作为道具
3. 基于prop显示不同的缩略图，使用相同的实例而不会被破坏

所以它可能需要两个地方的数据（自己的缩略图状态|| src prop），而且我很难围绕如何管理它。 如果这也是解决问题的正确方法，也不太确定。

此时，我在控制台中收到无限更新循环警告。

[Vue warn]: You may have an infinite update loop in a component render function. 

这是我的代码。 任何帮助将不胜感激。

<template>
  <div>
    <label class="fileContainer">
      <span class="icon is-large">
        <i class="fa fa-camera"></i>
      </span>
      <input type="file" :index="index" @change="updateThumbnail"/>
    </label>

    <object
      :data="pdfURL"
      type="application/pdf"
      :class="{visible: pdfURL != ''}">
    </object>

    <img :src="getSrc()" />
  </div>
</template>

<script>
export default {
  props: ["index", "srcProp"],
  data() {
    return {
      imageSrc: '',
      imageDataURI: '',
      pdfURL: '',
    }
  },
  methods: {
    getSrc() {
      if (typeof this.srcProp !== "undefined") {
        this.imageSrc = ''
        if (this.srcProp !== '') {
          this.imageSrc = this.srcProp
        } else {
          this.imageSrc = this.imageDataURI
        }
      } else {
        this.imageSrc = this.imageDataURI
      }
      return this.imageSrc
    },
    updateThumbnail(event) {
      this.$emit('change')
      const fileTypes = ['jpg', 'jpeg', 'png']
      const imgFile = event.target.files[0] || event.srcElement.files[0]
      const extension = imgFile.name.split('.').pop().toLowerCase()
      const isImg = fileTypes.indexOf(extension) > -1

      if (extension === 'pdf') {
        const pdfURL = URL.createObjectURL(imgFile);
        this.pdfURL = pdfURL
        this.height = 200
        return
      } else if (isImg) {
        var reader = new FileReader();
        reader.readAsDataURL(imgFile);
        reader.onload = () => {
          this.imageDataURI = reader.result
          return
        }
      } else {
        alert("Please submit images or PDFs only.")
      }
    },
  }
}
</script>

Answer 1

我遇到了同样的问题。 让我向你解释我所知道的。

当:src="anyFunction()"使用时，即使获得结果，它也会重新渲染到无限时间。

此时我们无限次地获得相同的数组。 尝试显示console.log('this.imgSrc') ，你将获得无限数量的数组。

在这里，我们不能使用切片或拼接来获得第一个数组。 我没有找到解决方案，但我设法将变量保存在src中而不是渲染整个函数并获取url。

<img :src="'https://maps.googleapis.com/maps/api/staticmap?zoom=15&size=500x250&markers=color:red%7Clabel:L%7C'+this.leadIpinfo.loc.split(',').slice(0,1)+','+this.Ipinfo.loc.split(',').slice(1,2) alt="loc">

在这里，我获取了数组，并将其拆分并切成2个值。

希望它在某些方面可以提供帮助。