feat: 🎸 企业内推岗位列表

src/components/InfiniteScroll/index.jsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { Empty } from "@arco-design/web-react";
 import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
-import { setLoadingTrue, setLoadingFalse } from "@/store/slices/loadingSlice";
+import { setLoadingFalse } from "@/store/slices/loadingSlice";
 
 const InfiniteScroll = ({
   loadMore,
@@ -13,22 +13,25 @@ const InfiniteScroll = ({
 }) => {
   const dispatch = useDispatch();
   const containerRef = useRef(null);
-  const loading = useSelector((state) => state.loading.value);
+  const globalLoading = useSelector((state) => state.loading.value);
+  const [loading, setLoading] = useState(false);
+
+  const handleScroll = () => {
+    if (loading) return;
+    setLoading(true);
+    if (!containerRef.current || globalLoading || !hasMore) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+
+    if (scrollTop + clientHeight >= scrollHeight - threshold) {
+      loadMore().finally(() => {
+        dispatch(setLoadingFalse());
+        setLoading(false);
+      });
+    }
+  };
 
   useEffect(() => {
-    const handleScroll = () => {
-      if (!containerRef.current || loading || !hasMore) return;
-
-      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-
-      if (scrollTop + clientHeight >= scrollHeight - threshold) {
-        dispatch(setLoadingTrue());
-        loadMore().finally(() => {
-          dispatch(setLoadingFalse());
-        });
-      }
-    };
-
     const container = containerRef.current;
     if (container) {
       container.addEventListener("scroll", handleScroll);
@@ -41,7 +44,7 @@ const InfiniteScroll = ({
         container.removeEventListener("scroll", handleScroll);
       }
     };
-  }, [loadMore, hasMore, threshold, loading]);
+  }, [loadMore, hasMore, threshold, globalLoading]);
 
   return (
     <div
@@ -49,7 +52,7 @@ const InfiniteScroll = ({
       className={`infinite-scroll-container ${className}`}
     >
       {children}
-      {!hasMore && !loading && <Empty description="没有更多了" />}
+      {!hasMore && !globalLoading && <Empty description="没有更多了" />}
     </div>
   );
 };