獲取并顯示用戶串列

我有一個顯示用戶資訊的個人資料頁面。該頁面顯示用戶名/電子郵件和創建串列的按鈕。

我還可以正確編輯名稱和電子郵件，它會立即反映在 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 >My lists</p>
            {#each listings as listing}
                <ListingItem listing={listing.data} id={listing.id} />
            {/each}
        {:else}
            <p >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上。“檔案”是空的：

現在我遇到了嚴重的麻煩！

uj5u.com熱心網友回復：

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

我在這里看到兩件事。不太重要的：.forEach()方法回傳undefined，所以return是多余的。更重要的是：.push()單獨不會自動觸發更新。查看檔案中的此
部分 您嘗試過記錄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
})

標籤：

上一篇：Firebase按流行度（趨勢）查詢檔案崩潰。迅速

下一篇：TypeScript不知道解構物件的型別