fix(examples): examples/arco-pro useEffect does not clear side effe…

…cts (#1283) * fix: `examples/arco-pro` useEffect does not clear side effects * changeset ` @farmfe-examples/arco-design-pro` patch --------- Co-authored-by: ADNY <66500121+ErKeLost@users.noreply.github.com>
farm-fe · May 6, 2024 · 673e844 · 673e844
1 parent e5868af
commit 673e844
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 14 deletions.
diff --git a/.changeset/sharp-dots-repeat.md b/.changeset/sharp-dots-repeat.md
@@ -0,0 +1,5 @@
+---
+"@farmfe-examples/arco-design-pro": patch
+---
+
+fix(examples): examples/arco-pro useEffect does not clear side effects
diff --git a/examples/arco-pro/src/pages/dashboard/workplace/announcement.tsx b/examples/arco-pro/src/pages/dashboard/workplace/announcement.tsx
@@ -12,19 +12,28 @@ function Announcement() {
   const t = useLocale(locale)
 
   const fetchData = () => {
+    let isMounted = true
     setLoading(true)
     axios
       .get('/api/workplace/announcement')
       .then((res) => {
-        setData(res.data)
+        if (isMounted) {
+          setData(res.data)
+        }
       })
       .finally(() => {
-        setLoading(false)
+        if (isMounted) {
+          setLoading(false)
+        }
       })
+    return () => {
+      isMounted = false
+    };
   }
 
   useEffect(() => {
-    fetchData()
+    const cleanup = fetchData();
+    return cleanup;
   }, [])
 
   function getTagColor(type) {

diff --git a/examples/arco-pro/src/pages/dashboard/workplace/content-percentage.tsx b/examples/arco-pro/src/pages/dashboard/workplace/content-percentage.tsx
@@ -11,19 +11,28 @@ function PopularContent() {
   const [loading, setLoading] = useState(true)
 
   const fetchData = () => {
+    let isMounted = true;
     setLoading(true)
     axios
       .get('/api/workplace/content-percentage')
       .then((res) => {
-        setData(res.data)
+        if (isMounted) {
+          setData(res.data)
+        }
       })
       .finally(() => {
-        setLoading(false)
+        if (isMounted) {
+          setLoading(false)
+        }
       })
+      return () => {
+        isMounted = false; 
+      };
   }
 
   useEffect(() => {
-    fetchData()
+    const cleanup = fetchData(); 
+    return cleanup; 
   }, [])
 
   return (

diff --git a/examples/arco-pro/src/pages/dashboard/workplace/overview.tsx b/examples/arco-pro/src/pages/dashboard/workplace/overview.tsx
@@ -57,21 +57,30 @@ function Overview() {
   const userInfo = useSelector((state: any) => state.userInfo || {})
 
   const fetchData = () => {
+    let isMounted = true;
     setLoading(true)
     axios
       .get('/api/workplace/overview-content')
       .then((res) => {
-        setData(res.data)
+        if (isMounted) {
+          setData(res.data);
+        }
       })
       .finally(() => {
-        setLoading(false)
+        if (isMounted) {
+          setLoading(false);
+        }
       })
+    return () => {
+      isMounted = false;
+    };
   }
 
   useEffect(() => {
-    fetchData()
+    const cleanup = fetchData(); 
+    return cleanup;
   }, [])
-  
+
   return (
     <Card>
       <Typography.Title heading={5}>

diff --git a/examples/arco-pro/src/pages/dashboard/workplace/popular-contents.tsx b/examples/arco-pro/src/pages/dashboard/workplace/popular-contents.tsx
@@ -15,22 +15,31 @@ function PopularContent() {
   const [total, setTotal] = useState(0)
 
   const fetchData = useCallback(() => {
+  let isMounted = true;
     setLoading(true)
     axios
       .get(
         `/api/workplace/popular-contents?page=${page}&pageSize=5&category=${type}`,
       )
       .then((res) => {
-        setData(res.data.list)
-        setTotal(res.data.total)
+        if (isMounted) {
+          setData(res.data.list)
+          setTotal(res.data.total)
+        }
       })
       .finally(() => {
-        setLoading(false)
+        if (isMounted) {
+          setLoading(false)
+        }
       })
+    return () => {
+      isMounted = false;
+    };
   }, [page, type])
 
   useEffect(() => {
-    fetchData()
+    const cleanup = fetchData();
+    return cleanup;
   }, [page, fetchData])
 
   const columns = [