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 }) => {
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;
});
};