From 785130fdaec026d9c8d3e49c405ce2147bfaa1c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A5=9E=E7=A7=98=E4=BA=BA?= <3311118881@qq.com>
Date: Fri, 25 Apr 2025 19:25:43 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E7=9B=B8=E5=86=8C=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=88=9D=E5=A7=8B=E5=8C=96=E5=92=8C=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=EF=BC=8C=E6=94=AF=E6=8C=81=E4=BB=8Eprops?=
 =?UTF-8?q?=E4=B8=AD=E8=8E=B7=E5=8F=96=E7=9B=B8=E5=86=8C=E5=90=8D=E7=A7=B0?=
 =?UTF-8?q?=E5=92=8CID=EF=BC=8C=E6=94=B9=E8=BF=9B=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=9F=E8=83=BD=E4=BB=A5=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/album/[id]/page.tsx | 41 ++++++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/app/album/[id]/page.tsx b/src/app/album/[id]/page.tsx
index a2e91d8..0be7d34 100644
--- a/src/app/album/[id]/page.tsx
+++ b/src/app/album/[id]/page.tsx
@@ -8,8 +8,8 @@ import { Photo } from '@/types/app/album'
 import { getImagesByAlbumIdAPI } from '@/api/album'
 import Masonry from "react-masonry-css"
 import Empty from '@/components/Empty'
-import "./page.scss"
 import dayjs from 'dayjs'
+import "./page.scss"
 
 const breakpointColumnsObj = {
   default: 4,
@@ -22,12 +22,7 @@ interface Props {
   searchParams: Promise<{ page: number; name: string }>;
 };
 
-export default async (props: Props) => {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
-  const id = params.id;
-  const name = searchParams.name;
-
+export default function AlbumPage(props: Props) {
   const [list, setList] = useState<Photo[]>([])
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState<number | null>(null)
   const [showModal, setShowModal] = useState(false)
@@ -35,11 +30,27 @@ export default async (props: Props) => {
   const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(true)
   const [loading, setLoading] = useState(false)
+  const [albumName, setAlbumName] = useState('')
+  const [albumId, setAlbumId] = useState<number>(0)
 
-  const getImagesByAlbumId = async (page: number = 1, isLoadMore: boolean = false) => {
+  useEffect(() => {
+    const initData = async () => {
+      const searchParams = await props.searchParams;
+      const params = await props.params;
+
+      setAlbumName(searchParams.name);
+      setAlbumId(params.id);
+      await getImagesByAlbumId(params.id);
+    };
+    initData();
+  }, [props.searchParams, props.params]);
+
+  const getImagesByAlbumId = async (id: number, page: number = 1, isLoadMore: boolean = false) => {
     try {
       setLoading(true)
-      const response = await getImagesByAlbumIdAPI(+id!, page)
+      const response = await getImagesByAlbumIdAPI(id, page)
+      console.log(response);
+      
       if (!response) return
 
       const { data } = response
@@ -66,19 +77,15 @@ export default async (props: Props) => {
 
     if (scrollHeight - scrollTop - clientHeight < 300) {
       setPage(prev => prev + 1)
-      getImagesByAlbumId(page + 1, true)
+      getImagesByAlbumId(albumId, page + 1, true)
     }
-  }, [loading, hasMore, page])
+  }, [loading, hasMore, page, albumId])
 
   useEffect(() => {
     window.addEventListener('scroll', handleScroll)
     return () => window.removeEventListener('scroll', handleScroll)
   }, [handleScroll])
 
-  useEffect(() => {
-    getImagesByAlbumId()
-  }, [])
-
   const openPhoto = async (index: number) => {
     setCurrentPhotoIndex(index)
     setIsImageLoading(true)
@@ -115,8 +122,8 @@ export default async (props: Props) => {
 
   return (
     <>
-      <title>{`📷 ${name} - 照片墙`}</title>
-      <meta name="description" content={`📷 ${name} - 照片墙`} />
+      <title>{`📷 ${albumName} - 照片墙`}</title>
+      <meta name="description" content={`📷 ${albumName} - 照片墙`} />
 
       <div className="container mx-auto px-4 py-8 pt-[90px]">
         {/* 移除最大高度限制 */}