fix(map): preserve hook order while data loads

.gitea/workflows/package.yml

@@ -0,0 +1,21 @@
+name: Frontend CI/CD v2
+
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch: {}
+
+jobs:
+  build-test-publish-and-deploy:
+    uses: OrgTJWater/ci-templates/.gitea/workflows/container-cd.yml@main
+    with:
+      image_name: gitea.waternetwork.cn/orgtjwater/tjwaterfrontend_refine
+      dockerfile: Dockerfile
+      build_context: .
+      deploy_service: frontend
+      deploy_host: 192.168.1.114
+    secrets:
+      REGISTRY_USERNAME: ${{ secrets.REGISTRY_USERNAME }}
+      REGISTRY_PASSWORD: ${{ secrets.REGISTRY_PASSWORD }}
+      DEV_DEPLOY_SSH_KEY: ${{ secrets.DEV_DEPLOY_SSH_KEY }}

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,

src/app/OlMap/Controls/StyleEditorPanel.tsx

@@ -174,15 +174,19 @@ const hexToRgba = (hex: string) => {
     : "rgba(0, 0, 0, 1)";
 };
 
-const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
+const StyleEditorPanel: React.FC<StyleEditorPanelProps> = (props) => {
-  layerStyleStates,
-  setLayerStyleStates,
-}) => {
-  const map = useMap();
   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,

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();
+  const readyData = data as typeof data & {
-  if (!data) {
+    currentTime: NonNullable<typeof data.currentTime>;
-    return <div>Loading...</div>; // 或其他占位符
+    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;
+  } = readyData;
-  if (
-    setCurrentTime === undefined ||
-    currentTime === undefined ||
-    selectedDate === undefined ||
-    setSelectedDate === undefined
-  ) {
-    return <div>Loading...</div>; // 或其他占位符
-  }
   const { open } = useNotification();
 
   const [isPlaying, setIsPlaying] = useState<boolean>(false);

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[]>([]);

src/components/olmap/HealthRiskAnalysis/Timeline.tsx

@@ -59,13 +59,21 @@ interface TimelineProps {
   schemeName?: string;
 }
 
-const Timeline: React.FC<TimelineProps> = ({
+const Timeline: React.FC<TimelineProps> = (props) => {
-  disableDateSelection = false,
-}) => {
   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,