diff --git a/frontend/src/pages/List.jsx b/frontend/src/pages/List.jsx index 66203d0..a42db1a 100644 --- a/frontend/src/pages/List.jsx +++ b/frontend/src/pages/List.jsx @@ -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) // 网络错误也跳转到登录页