From 8f244c68027232edae551881bbf9a502e9af3d79 Mon Sep 17 00:00:00 2001
From: yms <yms@cdhncy.com>
Date: Mon, 30 Dec 2024 09:59:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MapCantainer/index.tsx           | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx b/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
index 2ced58a2..f693eabe 100644
--- a/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
+++ b/src/pages/SecurityServiceOverview/components/MapCantainer/index.tsx
@@ -1,8 +1,13 @@
 import Tabs from '@/components/Tabs';
-import { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import DistrictMap from './DistrictMap';
 import EmphasisAreaMap from './EmphasisAreaMap';
 import styles from './index.less';
+const Map: Record<string, React.FC> = {
+  '1': DistrictMap,
+  '2': EmphasisAreaMap,
+};
+
 const MapContainer = () => {
   const [topKey, setTopKey] = useState('1');
   const botItems = [
@@ -25,10 +30,10 @@ const MapContainer = () => {
     },
   ];
 
-  const Map: Record<string, JSX.Element> = {
-    '1': <DistrictMap />,
-    '2': <EmphasisAreaMap />,
-  };
+  const renderMap = useMemo(() => {
+    const MapComponent = Map[topKey];
+    return <MapComponent />;
+  }, [topKey]);
 
   return (
     <div className={styles.container}>
@@ -44,7 +49,7 @@ const MapContainer = () => {
           }}
         />
       </div>
-      <div className={styles.mapContent}>{Map[topKey]}</div>
+      <div className={styles.mapContent}>{renderMap}</div>
       <div className={styles.botTabWarp}>
         <div>
           {botItems?.map((item) => {
-- 
GitLab