我正在使用 react 和 firestore 為社交媒體專案創建評論系統。我已經成功實作了分頁功能；我現在唯一遇到的問題是，當從資料庫中檢索到的資料小于限制時，我想隱藏“加載更多評論”按鈕，并在資料庫中的資料超過限制時顯示它。我查看了檔案，但似乎 Firebase 不支持“檢查或查找不在限制范圍內的其他檔案”。請問有什么辦法可以解決這個問題嗎？
以下是我到目前為止所得到的
const [comments, setComments] = useState([])
const [lastVisible, setLastVisible] = useState(null)
const [hasMorePages, setHasMorePages] = useState(false)
const pageSize = 3
let q = query(
collection(db, `/posts/${post.post_id}/comments`),
orderBy('createdAt', 'desc'),
limit(pageSize)
)
useEffect(() => {
const getSnapshot = onSnapshot(q, (querySnapShot) => {
const cmt = []
querySnapShot.forEach((dat) => {
cmt.push({ ...dat.data(), comment_id: dat.id })
})
setLastVisible(querySnapShot.docs[querySnapShot.docs.length - 1])
setComments(cmt)
setHasMorePages(true)
})
return () => getSnapshot()
}, [])
const pageSize_paginated = 4
const paginatedFunc = () => {
const next = query(
collection(db, `/posts/${post.post_id}/comments`),
orderBy('createdAt', 'desc'),
startAfter(lastVisible?.data()?.createdAt || 0),
limit(pageSize_paginated)
)
setCommentLoad(true)
const getSnapshot = onSnapshot(
next,
{ includeMetadataChanges: false },
(docSnap) => {
let cmt = []
if (!docSnap.empty) {
docSnap.forEach((snap) => {
cmt.push({ ...snap.data(), comment_id: snap.id })
})
setComments([...comments, ...cmt])
if (docSnap?.docs[docSnap.docs.length - 1]) {
setLastVisible(docSnap.docs[docSnap.docs.length - 1])
}
if (docSnap.docs.length < pageSize_paginated) setHasMorePages(false)
}
}
)
setCommentLoad(false)
return () => getSnapshot()
}
JSX
{hasMorePages && (
<button className={styles.comment__load} onClick={paginatedFunc}>
load more comments{' '}
{commentLoad && <FontAwesomeIcon icon={faSpinner} />}
</button>
)}
</div>
uj5u.com熱心網友回復：
現在有兩個選項浮現在腦海中：
- 使用 new COUNT() 運算子獲取所有檔案的計數，并使用它來確定檔案的總數。
- 總是檢索比您顯示的多一個檔案，并使用該額外檔案的存在來確定您是否在 UI 中顯示“顯示更多”按鈕。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/531024.html
標籤：Google Cloud Collective javascript反应火力基地谷歌云火库