获取并显示用户列表

Question

我有一个显示用户信息的个人资料页面。该页面显示用户名/电子邮件和一个创建列表的按钮。

我还可以正确编辑姓名和电子邮件，它会立即反映在 Firebase 中。好的。我得到了用户数据，我可以编辑它。

我现在要做的是显示用户创建的列表。

你看，这个用户创建了一个列表，返回给我的是他没有列表。

我会尽量缩短代码：

<script>
    imports.....
  import { db } from '../../firebase.config.js'


let listings = []

let auth = getAuth()

    // fetch the user's listings
  
    const fetchUserListings = async () => {
  
        const listingsRef = collection(db, 'listings')

        const q = query(
            listingsRef,
            where('userRef', '==', auth.currentUser.uid),
            orderBy('timestamp', 'desc')
        )

        const querySnap = await getDocs(q)

        querySnap.forEach((doc) => {
            return listings.push({
                id: doc.id,
                data: doc.data()
            })
        })
    }

    fetchUserListings()
  
</script>

        <!-- display the user's listings -->
    

<div>

        {#if listings.length > 0}
            <p class="listingText">My lists</p>
            {#each listings as listing}
                <ListingItem listing={listing.data} id={listing.id} />
            {/each}
        {:else}
            <p class="noListings">You have no lists</p>
        {/if}

</div>

我的 ListItem 组件：

<script>
    export let listing
    export let id
    export let handleDelete
    import DeleteIcon from '../../static/assets/svg/deleteIcon.svg'
</script>

<li class="categoryListing">
    <a href={`/category/${listing.type}/${id}`} class="categoryListingLink">
        <img src={listing.imgUrls[0]} alt={listing.name} class="categoryListingImg" />
        <div class="categoryListingDetails">
            <p class="categoryListingLocation">
                {listing.location}
            </p>
            <p class="CategoryListingName">
                {listing.name}
            </p>
            <p class="categoryListingPrice">
                ${listing.offer ? listing.discountedPrice : listing.regularPrice}
                {listing.type === 'rent' ? '/ por mês' : ''}
            </p>
            <div class="categoryListingInfoDiv">
                <img src="/assets/svg/bedIcon.svg" alt="cama" />
                <p class="categoryListingInfoText">
                    {listing.bedrooms > 1 ? `${listing.bedrooms} camas` : `${listing.bedrooms} cama`}
                </p>
                <img src="/assets/svg/bathtubIcon.svg" alt="banheiro" />
                <p class="categoryListingInfoText">
                    {listing.bathrooms > 1
                        ? `${listing.bathrooms} banheiros`
                        : `${listing.bathrooms} banheiro`}
                </p>
            </div>
        </div>
    </a>
    {#if handleDelete}
        <DeleteIcon
            class="removeIcon"
            fill="rgb(231, 76, 60)"
            onClick={() => {
                handleDelete(listing.id, listing.name)
            }}
        />
    {/if}
</li>

当你认为你已经达到了最简单的部分时，它仍然很艰难。

更新：

我认为问题出在 firebase 上。 “文档”为空：

现在我遇到了严重的麻烦！

Answer 1

querySnap.forEach((doc) => {
  return listings.push({
    id: doc.id,
    data: doc.data()
  })
})

我在这里看到两件事。不太重要的：.forEach() 方法返回undefined，所以return 是多余的。更重要的是：单独的.push() 不会自动触发更新。查看文档中的this 部分
您是否尝试记录listings？我假设数据在那里，只是没有显示，所以我建议将这部分更改为

querySnap.forEach((doc) => {
  listings = [...listings, {
    id: doc.id,
    data: doc.data()
  }]
})

或

querySnap.forEach((doc) => {
  listings.push({
    id: doc.id,
    data: doc.data()
  })
  listings = listings
})