fix: 修复页面刷新，测点获取指令重复发送问题

client/src/sections/wuyuanbiaoba/components/CameraView.jsx

@@ -1,12 +1,16 @@
 import React, { useRef, useEffect, useState, useCallback } from "react";
 import { useWebSocket } from "../actions/websocket.jsx";
 import { message } from "antd";
-import { useTargetStorage } from "../hooks/useTargetStorage.js";
+// import { useTargetStorage } from "../hooks/useTargetStorage.js";
+
 const CameraView = ({
    selectedTargetId,
    onClearSelection,
    onRectangleClick,
    selectedTemplate,
+   targets = [],
+   targetsLoading = false,
+   onRefreshTargets,
 }) => {
    const imgRef = useRef(null);
    const canvasRef = useRef(null);
@@ -43,8 +47,8 @@ const CameraView = ({
    // 使用WebSocket连接
    const { isConnected, sendMessage } = useWebSocket();
 
-   // 使用标靶数据管理Hook
+   // 从 props 接收标靶数据，而不是调用 Hook
-   const { targets, loading, refreshTargets } = useTargetStorage();
+   // const { targets, loading, refreshTargets } = useTargetStorage();
 
    const minScale = 0.2;
    const maxScale = 4.0;
@@ -797,7 +801,9 @@ const CameraView = ({
 
                // 保存成功后刷新标靶列表数据
                setTimeout(() => {
-                  refreshTargets();
+                  if (onRefreshTargets) {
+                     onRefreshTargets();
+                  }
                }, 500); // 延迟500ms确保服务器处理完成
 
                // 清除选中状态
@@ -822,7 +828,7 @@ const CameraView = ({
       rectangles,
       isConnected,
       sendMessage,
-      refreshTargets,
+      onRefreshTargets,
       onClearSelection,
       isSaving,
    ]);
@@ -882,12 +888,12 @@ const CameraView = ({
    useEffect(() => {
       // console.log("targets 或 loading 状态变化:", {
       //    targets,
-      //    loading,
+      //    targetsLoading,
       //    targetsLength: targets?.length,
       // });
 
       if (
-         !loading &&
+         !targetsLoading &&
          targets &&
          targets.length > 0 &&
          videoNaturalWidth > 0 &&
@@ -943,7 +949,7 @@ const CameraView = ({
             redrawAllRectangles();
          }, 100);
          return () => clearTimeout(timeoutId);
-      } else if (!loading && (!targets || targets.length === 0)) {
+      } else if (!targetsLoading && (!targets || targets.length === 0)) {
          // 如果没有标靶数据，清空矩形框
          // console.log(
          //    "标靶数据为空，准备清空矩形框，当前矩形框数量:",
@@ -952,7 +958,7 @@ const CameraView = ({
          setRectangles([]);
          // console.log("标靶数据为空，已清空矩形框");
       }
-   }, [targets, loading, videoNaturalWidth, videoNaturalHeight]); // 只依赖targets和loading状态
+   }, [targets, targetsLoading, videoNaturalWidth, videoNaturalHeight]);
 
    // 专门监听rectangles变化并重绘
    useEffect(() => {

client/src/sections/wuyuanbiaoba/container/index.jsx

@@ -517,6 +517,10 @@ const WuyuanbiaobaContent = () => {
                selectedTemplate={
                   selectedTemplate ? getTemplateByKey(selectedTemplate) : null
                }
+               // 传递标靶数据，避免重复调用 Hook
+               targets={targetListData}
+               targetsLoading={targetsLoading}
+               onRefreshTargets={refreshTargets}
             />
 
             {/* 右侧 Target List / Temp List 区域 */}

client/src/sections/wuyuanbiaoba/hooks/useTargetStorage.js

@@ -34,8 +34,9 @@ export const useTargetStorage = () => {
 
    // 发送获取标靶数据的命令
    const fetchTargets = useCallback(() => {
+
       if (!isConnected) {
-         console.warn('WebSocket未连接，无法获取标靶数据');
+         console.warn('⚠️ WebSocket未连接，无法获取标靶数据');
          return;
       }
 
@@ -49,8 +50,11 @@ export const useTargetStorage = () => {
       }));
 
       if (!success) {
+         console.error('❌ 发送获取标靶数据命令失败');
          setError('发送获取标靶数据命令失败');
          setLoading(false);
+      } else {
+         // console.log(' getPoints 请求已发送');
       }
    }, [isConnected, sendMessage]);
 
@@ -63,7 +67,7 @@ export const useTargetStorage = () => {
 
             // 检查是否为空对象
             if (!responseValues || Object.keys(responseValues).length === 0) {
-               console.log('服务端返回空的标靶数据');
+               console.log('⚠️ 服务端返回空的标靶数据');
                setTargets([]);
                setError(null);
                setLoading(false);
@@ -120,9 +124,21 @@ export const useTargetStorage = () => {
 
    // WebSocket连接建立后自动获取数据
    useEffect(() => {
-      if (isConnected) {
+      let isMounted = true;
+
+      if (isConnected && isMounted) {
+         // 添加延迟，避免立即重复触发
+         const timer = setTimeout(() => {
+            if (isMounted) {
                fetchTargets();
             }
+         }, 100);
+
+         return () => {
+            isMounted = false;
+            clearTimeout(timer);
+         };
+      }
    }, [isConnected, fetchTargets]);
 
    // 通用的标靶数据处理纯函数

package.json

@@ -1,6 +1,6 @@
 {
    "name": "wuyuanbiaoba-web",
-   "version": "1.0.2",
+   "version": "1.0.3",
    "main": "index.html",
    "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",

server/tcpProxy/index.js

@@ -92,7 +92,7 @@ function setupTcpProxy(conf) {
 
          // 转发字符串数据到TCP服务器
          if (tcpClient.writable) {
-            // console.log('准备发送数据到TCP服务器:', messageStr);
+            console.log('准备发送数据到TCP服务器:', messageStr);
 
             // 检查数据大小
             const dataSize = Buffer.byteLength(messageStr, 'utf8');