陷入无限循环（Vue.js）

Question

我在 firebase、帖子和用户中有 2 个文档，在帖子表中我有一个 uid，我在帖子文档中的 uid 的帮助下从用户文档中获取“头像”字段，请参阅代码：

     fetchAvatar(uid){
     var avatar;
     this.$db.collection("users")
         .doc(uid)
         .get().then(snapshot => {
         avatar = snapshot.data().avatar
     });
     return avatar;
 }

 <q-list
   class="rounded-borders q-mt-md q-mb-md"
   v-for="(post, key) in posts"
   :key="post.key"
  >
   <div v-if="key == 0" v-scroll-fire="(new_group = false)"></div>
   <PostDisplay
    :key="key"
    :type="post.type"
    :avatar="fetchAvatar(post.uid)" // Calling function there
    :more="post.more"
    :name="post.owner"
    :group="post.group_name"
    :timestamp="post.created_at"
    :likeCount="post.likes.length"
    :commentCount="post.comments.length"
    :comments="post.comments"
    :text="post.text"
    doc="posts"
    :id="post.id"
    class="dropshadow"
    :media-urls="post.mediaUrls"
    :post="post"
   />
  </q-list>

Infinite loop error

我需要一个适当的解决方案来解决这个错误，我非常感谢给我正确答案的人。

Answer 1

key="post.key" 看起来很可疑。我怀疑这些帖子有一个关键属性。你真的应该使用post.id 作为键。 在PostDisplay 上定义key 是没有用的，因为您已经在父级上定义了一个。 此外，(post, index) 而不是 (post, key) 将有助于避免混淆概念。

旁注：

• 将单个属性（类型、更多、所有者、...）传递给 PostDisplay 是可以的。通过整个post 也可以。但同时做这两件事很奇怪。
• 更多问题，我看到你在每个 PostDisplay 上传递整个 posts 数组。您真的应该让 PostDisplay 发出事件并让其父级作用于帖子数组。

编辑： 无论如何，要找出问题所在，您可以删除代码的某些部分，直到它再次开始运行。尝试使用 v-scroll-fire 删除 div。然后尝试移除头像属性。

据说你的 fetchAvatar 是错误的。它将始终返回 undefined 因为 $db 调用是异步的，avatar = ... 将始终在函数 fetchAvatar 返回它的（未定义）值之后进行评估。 我可能会做什么：

// :avatar="fetchAvatar(post.uid)"
fetchAvatar(uid) {
  return () => this.$db.collection("users")
         .doc(uid)
         .get().then(snapshot => snapshot.data().avatar)
}

在 PostDisplay.vue 上：

data() { return { fetchedAvatar: '' } },
created() { // or mounted()
  this.avatar().then(avatar => { this.fetchedAvatar = avatar })
}