fix: 修复分页功能
This commit is contained in:
parent
2c0056c827
commit
1fdc27a9b4
|
|
@ -17,7 +17,7 @@ export default function List() {
|
|||
const [isAdmin, setIsAdmin] = useState(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [hasMore, setHasMore] = useState(true)
|
||||
const [initialLoad, setInitialLoad] = useState(true)
|
||||
const [loadingMore, setLoadingMore] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
// 检查是否管理员
|
||||
|
|
@ -49,19 +49,7 @@ export default function List() {
|
|||
setFilter('')
|
||||
setFilterType('')
|
||||
}
|
||||
// 滚动加载更多
|
||||
const handleScroll = () => {
|
||||
if (loading || !hasMore) return
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop
|
||||
const scrollHeight = document.documentElement.scrollHeight
|
||||
const clientHeight = document.documentElement.clientHeight
|
||||
if (scrollTop + clientHeight >= scrollHeight - 100) {
|
||||
fetchCollections(true)
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
fetchCollections()
|
||||
}
|
||||
|
||||
handleHashChange()
|
||||
|
|
@ -73,22 +61,28 @@ export default function List() {
|
|||
window.removeEventListener('focus', fetchCollections)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const fetchCollections = async (reset = false) => {
|
||||
const token = localStorage.getItem('token')
|
||||
const currentPage = reset ? 1 : page
|
||||
|
||||
try {
|
||||
if (reset) {
|
||||
setCollections([])
|
||||
setPage(1)
|
||||
setLoading(true)
|
||||
setInitialLoad(true)
|
||||
} else {
|
||||
setLoading(true)
|
||||
// 滚动加载更多
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (loading || loadingMore || !hasMore) return
|
||||
const scrollTop = window.scrollY || document.documentElement.scrollTop
|
||||
const scrollHeight = document.documentElement.scrollHeight
|
||||
const clientHeight = document.documentElement.clientHeight
|
||||
if (scrollTop + clientHeight >= scrollHeight - 100) {
|
||||
fetchCollections(false)
|
||||
}
|
||||
}
|
||||
|
||||
const res = await fetch(`/api/collections?page=${currentPage}&limit=50`, {
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
}, [loading, loadingMore, hasMore, page])
|
||||
|
||||
const fetchCollections = async () => {
|
||||
// set loading based on reset
|
||||
const token = localStorage.getItem('token')
|
||||
try {
|
||||
const res = await fetch('/api/collections?page=1&limit=50', {
|
||||
headers: token ? { 'Authorization': 'Bearer ' + token } : {}
|
||||
})
|
||||
|
||||
|
|
@ -107,18 +101,6 @@ export default function List() {
|
|||
list = list.items
|
||||
}
|
||||
|
||||
// 分页处理
|
||||
if (reset) {
|
||||
setCollections(list || [])
|
||||
} else {
|
||||
setCollections(prev => [...prev, ...(list || [])])
|
||||
}
|
||||
|
||||
// 判断是否还有更多数据
|
||||
const receivedCount = list ? list.length : 0
|
||||
setHasMore(receivedCount >= 50)
|
||||
if (!initialLoad) setPage(prev => prev + 1)
|
||||
|
||||
// 应用筛选条件
|
||||
// 用户ID筛选(从URL获取)
|
||||
if (userIdFilter) {
|
||||
|
|
@ -157,7 +139,14 @@ export default function List() {
|
|||
console.log(`筛选:${filterType} = ${filter}, 结果:${list.length}条`)
|
||||
}
|
||||
|
||||
setCollections(list || [])
|
||||
# 分页处理
|
||||
if (page === 1) {
|
||||
setCollections(list || [])
|
||||
} else {
|
||||
setCollections(prev => [...prev, ...(list || [])])
|
||||
}
|
||||
setHasMore((list || []).length >= 50)
|
||||
if (page > 1) setPage(p => p + 1)
|
||||
} catch (e) {
|
||||
console.error('Fetch collections error:', e)
|
||||
// 网络错误也跳转到登录页
|
||||
|
|
|
|||
Loading…
Reference in New Issue