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