From b807fee13fd40092723c557c300dcd6e6796ec95 Mon Sep 17 00:00:00 2001
From: Rivery <9858560+xigongdaEricyang@users.noreply.github.com>
Date: Mon, 31 Oct 2022 15:28:18 +0800
Subject: [PATCH] fix: partition info cleared sometimes (#153)

---
 .../ServiceManage/PartitionInfo/index.tsx     | 100 +++++++++---------
 1 file changed, 50 insertions(+), 50 deletions(-)

diff --git a/src/pages/ServiceManage/PartitionInfo/index.tsx b/src/pages/ServiceManage/PartitionInfo/index.tsx
index dc1d8420..14b9e8e9 100644
--- a/src/pages/ServiceManage/PartitionInfo/index.tsx
+++ b/src/pages/ServiceManage/PartitionInfo/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import _ from 'lodash';
 import { Input, Table } from 'antd';
 import { connect } from 'react-redux';
@@ -26,25 +26,22 @@ const mapDispatch: any = (dispatch: IDispatch) => ({
 });
 interface IProps
   extends ReturnType<typeof mapState>,
-    ReturnType<typeof mapDispatch> {
+  ReturnType<typeof mapDispatch> {
   isOverview: boolean;
 }
 
 const PartitionInfo: React.FC<IProps> = (props: IProps) => {
-  const { nebulaConnect, currentSpace, loading, parts, spaces, isOverview } =
+  const { nebulaConnect, currentSpace, loading, parts, spaces, isOverview, asyncGetSpaces, asyncGetParts } =
     props;
 
   useEffect(() => {
     if (nebulaConnect) {
-      props.asyncGetSpaces();
+      asyncGetSpaces();
+      if (currentSpace) {
+        asyncGetParts();
+      }
     }
-  }, [nebulaConnect]);
-
-  useEffect(() => {
-    if (currentSpace) {
-      props.asyncGetParts();
-    }
-  }, [currentSpace]);
+  }, [nebulaConnect, currentSpace]);
 
   const handleSpaceChange = async space => {
     const { code } = (await props.asyncUseSpaces(space)) as any;
@@ -59,45 +56,48 @@ const PartitionInfo: React.FC<IProps> = (props: IProps) => {
     trackEvent('partition_info', 'search_partitionId');
   };
 
-  const columns = [
-    {
-      title: (
-        <TitleInstruction
-          title="PartitionId"
-          description={intl.get('description.partitionId')}
-        />
-      ),
-      dataIndex: 'Partition ID',
-    },
-    {
-      title: (
-        <TitleInstruction
-          title="Leader"
-          description={intl.get('description.leader')}
-        />
-      ),
-      dataIndex: 'Leader',
-    },
-    {
-      title: (
-        <TitleInstruction
-          title="Peers"
-          description={intl.get('description.peers')}
-        />
-      ),
-      dataIndex: 'Peers',
-    },
-    {
-      title: (
-        <TitleInstruction
-          title="Losts"
-          description={intl.get('description.losts')}
-        />
-      ),
-      dataIndex: 'Losts',
-      render: losts => <span>{losts || '-'}</span>,
-    },
-  ];
+  const columns = useMemo(() => (
+    [
+      {
+        title: (
+          <TitleInstruction
+            title="PartitionId"
+            description={intl.get('description.partitionId')}
+          />
+        ),
+        dataIndex: 'Partition ID',
+      },
+      {
+        title: (
+          <TitleInstruction
+            title="Leader"
+            description={intl.get('description.leader')}
+          />
+        ),
+        dataIndex: 'Leader',
+      },
+      {
+        title: (
+          <TitleInstruction
+            title="Peers"
+            description={intl.get('description.peers')}
+          />
+        ),
+        dataIndex: 'Peers',
+      },
+      {
+        title: (
+          <TitleInstruction
+            title="Losts"
+            description={intl.get('description.losts')}
+          />
+        ),
+        dataIndex: 'Losts',
+        render: losts => <span>{losts || '-'}</span>,
+      },
+    ]
+  ), []);
+
   return (
     <div className="service-info service-partition">
       {!isOverview && (