From f5bcf28f7e29c9bc74856d8c13de76aaee272fab Mon Sep 17 00:00:00 2001
From: TJWater CI <ci@waternetwork.cn>
Date: Tue, 11 Aug 2026 10:32:18 +0800
Subject: [PATCH] fix(map): preserve hook order while data loads

---
 src/app/OlMap/Controls/LayerControl.tsx       | 11 ++++-
 src/app/OlMap/Controls/StyleEditorPanel.tsx   | 14 ++++---
 src/app/OlMap/Controls/Timeline.tsx           | 40 ++++++++++++-------
 src/app/OlMap/Controls/Toolbar.tsx            | 14 +++++--
 .../olmap/HealthRiskAnalysis/Timeline.tsx     | 16 ++++++--
 5 files changed, 67 insertions(+), 28 deletions(-)

diff --git a/src/app/OlMap/Controls/LayerControl.tsx b/src/app/OlMap/Controls/LayerControl.tsx
index 8b539a5..1e49724 100644
--- a/src/app/OlMap/Controls/LayerControl.tsx
+++ b/src/app/OlMap/Controls/LayerControl.tsx
@@ -16,9 +16,16 @@ interface LayerItem {
 }
 
 const LayerControl: React.FC = () => {
-  const map = useMap();
   const data = useData();
-  if (!data) return;
+  if (!data) return null;
+
+  return <LayerControlContent data={data} />;
+};
+
+const LayerControlContent: React.FC<{
+  data: NonNullable<ReturnType<typeof useData>>;
+}> = ({ data }) => {
+  const map = useMap();
   const {
     deckLayer,
     isContourLayerAvailable,
diff --git a/src/app/OlMap/Controls/StyleEditorPanel.tsx b/src/app/OlMap/Controls/StyleEditorPanel.tsx
index 25dfec7..a79539e 100644
--- a/src/app/OlMap/Controls/StyleEditorPanel.tsx
+++ b/src/app/OlMap/Controls/StyleEditorPanel.tsx
@@ -174,15 +174,19 @@ const hexToRgba = (hex: string) => {
     : "rgba(0, 0, 0, 1)";
 };
 
-const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
-  layerStyleStates,
-  setLayerStyleStates,
-}) => {
-  const map = useMap();
+const StyleEditorPanel: React.FC<StyleEditorPanelProps> = (props) => {
   const data = useData();
   if (!data) {
     return <div>Loading...</div>; // 或其他占位符
   }
+
+  return <StyleEditorPanelContent {...props} data={data} />;
+};
+
+const StyleEditorPanelContent: React.FC<
+  StyleEditorPanelProps & { data: NonNullable<ReturnType<typeof useData>> }
+> = ({ layerStyleStates, setLayerStyleStates, data }) => {
+  const map = useMap();
   const {
     currentJunctionCalData,
     currentPipeCalData,
diff --git a/src/app/OlMap/Controls/Timeline.tsx b/src/app/OlMap/Controls/Timeline.tsx
index 0688edb..422ac3a 100644
--- a/src/app/OlMap/Controls/Timeline.tsx
+++ b/src/app/OlMap/Controls/Timeline.tsx
@@ -38,17 +38,37 @@ interface TimelineProps {
   schemeType?: string;
 }
 
-const Timeline: React.FC<TimelineProps> = ({
+const Timeline: React.FC<TimelineProps> = (props) => {
+  const data = useData();
+  if (
+    !data ||
+    data.setCurrentTime === undefined ||
+    data.currentTime === undefined ||
+    data.selectedDate === undefined ||
+    data.setSelectedDate === undefined
+  ) {
+    return <div>Loading...</div>;
+  }
+
+  return <TimelineContent {...props} data={data} />;
+};
+
+const TimelineContent: React.FC<
+  TimelineProps & { data: NonNullable<ReturnType<typeof useData>> }
+> = ({
   schemeDate,
   timeRange,
   disableDateSelection = false,
   schemeName = "",
   schemeType = "burst_Analysis",
+  data,
 }) => {
-  const data = useData();
-  if (!data) {
-    return <div>Loading...</div>; // 或其他占位符
-  }
+  const readyData = data as typeof data & {
+    currentTime: NonNullable<typeof data.currentTime>;
+    setCurrentTime: NonNullable<typeof data.setCurrentTime>;
+    selectedDate: NonNullable<typeof data.selectedDate>;
+    setSelectedDate: NonNullable<typeof data.setSelectedDate>;
+  };
   const {
     currentTime,
     setCurrentTime,
@@ -58,15 +78,7 @@ const Timeline: React.FC<TimelineProps> = ({
     setCurrentPipeCalData,
     junctionText,
     pipeText,
-  } = data;
-  if (
-    setCurrentTime === undefined ||
-    currentTime === undefined ||
-    selectedDate === undefined ||
-    setSelectedDate === undefined
-  ) {
-    return <div>Loading...</div>; // 或其他占位符
-  }
+  } = readyData;
   const { open } = useNotification();
 
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
diff --git a/src/app/OlMap/Controls/Toolbar.tsx b/src/app/OlMap/Controls/Toolbar.tsx
index 73b2c2c..06cb5b1 100644
--- a/src/app/OlMap/Controls/Toolbar.tsx
+++ b/src/app/OlMap/Controls/Toolbar.tsx
@@ -27,15 +27,23 @@ interface ToolbarProps {
   queryType?: string; // 可选的查询类型参数
   HistoryPanel?: React.FC<any>; // 可选的自定义历史数据面板
 }
-const Toolbar: React.FC<ToolbarProps> = ({
+const Toolbar: React.FC<ToolbarProps> = (props) => {
+  const data = useData();
+  if (!data) return null;
+
+  return <ToolbarContent {...props} data={data} />;
+};
+
+const ToolbarContent: React.FC<
+  ToolbarProps & { data: NonNullable<ReturnType<typeof useData>> }
+> = ({
   hiddenButtons,
   queryType,
   HistoryPanel,
+  data,
 }) => {
   const map = useMap();
-  const data = useData();
   const { open } = useNotification();
-  if (!data) return null;
   const { currentTime, selectedDate, schemeName } = data;
   const [activeTools, setActiveTools] = useState<string[]>([]);
   const [highlightFeatures, setHighlightFeatures] = useState<Feature[]>([]);
diff --git a/src/components/olmap/HealthRiskAnalysis/Timeline.tsx b/src/components/olmap/HealthRiskAnalysis/Timeline.tsx
index 382a4c3..5c12d81 100644
--- a/src/components/olmap/HealthRiskAnalysis/Timeline.tsx
+++ b/src/components/olmap/HealthRiskAnalysis/Timeline.tsx
@@ -59,13 +59,21 @@ interface TimelineProps {
   schemeName?: string;
 }
 
-const Timeline: React.FC<TimelineProps> = ({
-  disableDateSelection = false,
-}) => {
+const Timeline: React.FC<TimelineProps> = (props) => {
   const data = useData();
   if (!data) {
-    return <div>Loading...</div>; // 或其他占位符
+    return <div>Loading...</div>;
   }
+
+  return <TimelineContent {...props} data={data} />;
+};
+
+const TimelineContent: React.FC<
+  TimelineProps & { data: NonNullable<ReturnType<typeof useData>> }
+> = ({
+  disableDateSelection = false,
+  data,
+}) => {
   const { open } = useNotification();
   const {
     predictionResults,