fix: 优化瀑布流渲染

besscroft · Jul 30, 2024 · a3208fb · a3208fb
1 parent c8b039d
commit a3208fb
Showing 1 changed file with 11 additions and 10 deletions.
diff --git a/components/Masonry.tsx b/components/Masonry.tsx
@@ -15,6 +15,16 @@ import { FloatButton } from 'antd'
 
 import 'react-photo-album/masonry.css'
 
+function renderNextImage(
+  { alt = '', title, sizes }: RenderImageProps,
+  { photo }: RenderImageContext,
+  dataList: never[],
+) {
+  return (
+    <BlurImage photo={photo} dataList={dataList} />
+  );
+}
+
 export default function Masonry(props : Readonly<ImageHandleProps>) {
   const { data: pageTotal } = useSWRPageTotalHook(props)
   const { data, error, isLoading, isValidating, size, setSize } = useSWRInfinite((index) => {
@@ -34,15 +44,6 @@ export default function Masonry(props : Readonly<ImageHandleProps>) {
     (state) => state,
   )
 
-  function renderNextImage(
-    { alt = '', title, sizes }: RenderImageProps,
-    { photo }: RenderImageContext,
-  ) {
-    return (
-      <BlurImage photo={photo} dataList={dataList} />
-    );
-  }
-
   useEffect(() => {
     const fetchData = async (id: number) => {
       try {
@@ -84,7 +85,7 @@ export default function Masonry(props : Readonly<ImageHandleProps>) {
             ...item
           })) || []
         }
-        render={{ image: renderNextImage }}
+        render={{image: (...args) => renderNextImage(...args, dataList)}}
       />
       <div className="flex items-center justify-center my-4">
         {