sun-chaochao 3 лет назад
Родитель
Сommit
844b477a90

+ 4 - 2
src/pages/device/Instance/Detail/Running/Property/PropertyCard.tsx

@@ -41,7 +41,7 @@ const Property = (props: Props) => {
   const [visible, setVisible] = useState<boolean>(false);
   const [editVisible, setEditVisible] = useState<boolean>(false);
   const [indicatorVisible, setIndicatorVisible] = useState<boolean>(false);
-  const [dataValue, setDataValue] = useState<any>(null);
+  const [dataValue, setDataValue] = useState<any>(value);
 
   const renderTitle = (title: string) => {
     return (
@@ -107,7 +107,9 @@ const Property = (props: Props) => {
           <div style={{ marginTop: 10 }}>
             <div style={{ color: 'rgba(0, 0, 0, .65)', fontSize: 12 }}>更新时间</div>
             <div style={{ marginTop: 5, fontSize: 16, color: 'black' }} className="value">
-              {value?.timestamp ? moment(value?.timestamp).format('YYYY-MM-DD HH:mm:ss') : ''}
+              {dataValue?.timestamp
+                ? moment(dataValue?.timestamp).format('YYYY-MM-DD HH:mm:ss')
+                : ''}
             </div>
           </div>
         </div>

+ 23 - 13
src/pages/device/Instance/Detail/Running/Property/index.tsx

@@ -53,6 +53,8 @@ const Property = (props: Props) => {
   const [indicatorVisible, setIndicatorVisible] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
 
+  const [loading1, setLoading1] = useState<boolean>(true); // 使valueChange里面能拿到最新的propertyValue
+
   const [check, setCheck] = useState<boolean>(true);
 
   const refreshProperty = async (id: string) => {
@@ -147,19 +149,21 @@ const Property = (props: Props) => {
 
   const subRef = useRef<any>(null);
 
-  const valueChange = (payload: any) => {
-    (payload || [])
-      .sort((a: any, b: any) => a.timestamp - b.timestamp)
-      .forEach((item: any) => {
-        const { value } = item;
-        propertyValue[value?.property] = { ...item, ...value };
-      });
-    setPropertyValue({ ...propertyValue });
-    list.current = [];
-  };
+  const valueChange = useCallback(
+    (payload: any) => {
+      (payload || [])
+        .sort((a: any, b: any) => a.timestamp - b.timestamp)
+        .forEach((item: any) => {
+          const { value } = item;
+          propertyValue[value?.property] = { ...item, ...value };
+        });
+      setPropertyValue({ ...propertyValue });
+      list.current = [];
+    },
+    [propertyValue],
+  );
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const throttleFn = useCallback(throttle(valueChange, 500), []);
+  const throttleFn = throttle(valueChange, 500);
 
   /**
    * 订阅属性数据
@@ -219,15 +223,21 @@ const Property = (props: Props) => {
             });
           setPropertyValue({ ...propertyValue, ...obj });
         }
+        setLoading1(false);
         setLoading(false);
       },
     });
   };
 
   useEffect(() => {
+    if (!loading1) {
+      subscribeProperty();
+    }
+  }, [loading1]);
+
+  useEffect(() => {
     if (dataSource.data.length > 0) {
       getDashboard();
-      subscribeProperty();
     } else {
       setLoading(false);
     }