diff --git a/src/app/(main)/network-simulation/page.tsx b/src/app/(main)/network-simulation/page.tsx index 68309e3..c19d6e3 100644 --- a/src/app/(main)/network-simulation/page.tsx +++ b/src/app/(main)/network-simulation/page.tsx @@ -77,9 +77,9 @@ export default function Home() { return (
+
-
{ // 添加 useEffect 来监听 currentTime 和 selectedDate 的变化,并获取数据 useEffect(() => { // 首次加载时,如果 selectedDate 或 currentTime 未定义,则跳过执行,避免报错 - if (selectedDate && currentTime !== undefined) { + if (selectedDate && currentTime !== undefined && currentTime !== -1) { // 检查至少一个属性有值 const junctionProperties = junctionText; const pipeProperties = pipeText; @@ -311,6 +311,8 @@ const Timeline: React.FC = () => { // 组件卸载时清理定时器和防抖 useEffect(() => { + setCurrentTime(0); // 组件卸载时重置时间 + return () => { if (intervalRef.current) { clearInterval(intervalRef.current); diff --git a/src/app/OlMap/Controls/Toolbar.tsx b/src/app/OlMap/Controls/Toolbar.tsx index 0b2e608..7353b07 100644 --- a/src/app/OlMap/Controls/Toolbar.tsx +++ b/src/app/OlMap/Controls/Toolbar.tsx @@ -454,8 +454,8 @@ const Toolbar: React.FC = ({ hiddenButtons }) => { setComputedProperties({}); } }; - - queryComputedProperties(); + // 仅当 currentTime 有效时查询 + if (currentTime !== -1) queryComputedProperties(); }, [highlightFeature, currentTime, selectedDate]); // 从要素属性中提取属性面板需要的数据 diff --git a/src/app/OlMap/MapComponent.tsx b/src/app/OlMap/MapComponent.tsx index 2a9c2d0..65ec286 100644 --- a/src/app/OlMap/MapComponent.tsx +++ b/src/app/OlMap/MapComponent.tsx @@ -104,7 +104,7 @@ const MapComponent: React.FC = ({ children }) => { const [map, setMap] = useState(); // currentCalData 用于存储当前计算结果 - const [currentTime, setCurrentTime] = useState(0); + const [currentTime, setCurrentTime] = useState(-1); // 默认-1表示未选择时间 const [selectedDate, setSelectedDate] = useState(new Date("2025-9-17")); // const [selectedDate, setSelectedDate] = useState(new Date()); // 默认今天 @@ -632,7 +632,7 @@ const MapComponent: React.FC = ({ children }) => {
- + {children}
diff --git a/src/components/olmap/SCADADeviceList.tsx b/src/components/olmap/SCADADeviceList.tsx index d98c253..460747a 100644 --- a/src/components/olmap/SCADADeviceList.tsx +++ b/src/components/olmap/SCADADeviceList.tsx @@ -67,6 +67,9 @@ const SCADADeviceList: React.FC = ({ const [selectedStatus, setSelectedStatus] = useState("all"); const [isExpanded, setIsExpanded] = useState(true); const [internalSelection, setInternalSelection] = useState([]); + const [pendingSelection, setPendingSelection] = useState( + null + ); const activeSelection = selectedDeviceIds ?? internalSelection; @@ -76,6 +79,14 @@ const SCADADeviceList: React.FC = ({ } }, [selectedDeviceIds]); + // 添加 useEffect 来延迟调用 onSelectionChange,避免在渲染时触发父组件的 setState + useEffect(() => { + if (pendingSelection !== null) { + onSelectionChange?.(pendingSelection); + setPendingSelection(null); + } + }, [pendingSelection, onSelectionChange]); + // 获取设备类型列表 const deviceTypes = useMemo(() => { const types = Array.from(new Set(devices.map((device) => device.type))); @@ -154,7 +165,7 @@ const SCADADeviceList: React.FC = ({ ? [] : [device.id]; - onSelectionChange?.(nextSelection); + setPendingSelection(nextSelection); // 设置待处理的 selection,延迟调用 return nextSelection; }); };