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

.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

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) {

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 (

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}>

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 = [