src/components/Global/MqttConnection.jsx

@@ -64,20 +64,11 @@ const listenMessage = (callback) => {
     });
 };
 
-const listenMessageState = (setState) => {
+const setValSvg = (listenTopic, svg) => {
     client.on('message', (topic, message) => {
-        const msgObj = {
-            date: new Date().toLocaleString(),
-            topic: topic,
-            msg: JSON.parse(message),
-        };
-        setState(msgObj);
-    });
-};
+        if (topic == listenTopic) {
+            const objChanel = JSON.parse(message);
 
-const setValSvg = (msgValue, topic, svg) => {
-    if (msgValue.topic == topic) {
-        const objChanel = msgValue?.msg;
             Object.entries(objChanel).forEach(([key, value]) => {
                 // console.log(key, value);
                 const el = svg.getElementById(key);
@@ -94,6 +85,7 @@ const setValSvg = (msgValue, topic, svg) => {
                 }
             });
         }
+    });
 };
 
-export { publishMessage, listenMessage, listenMessageState, setValSvg };
+export { publishMessage, listenMessage, setValSvg };

src/pages/home/SvgTest.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Card, Typography, Flex } from 'antd';
 import { ReactSVG } from 'react-svg';
-import { listenMessageState, setValSvg } from '../../components/Global/MqttConnection';
+import { setValSvg } from '../../components/Global/MqttConnection';
 
 const { Text } = Typography;
 
@@ -9,12 +9,6 @@ const filePathSvg = '/svg/test-new.svg';
 const topicMqtt = 'PIU_GGCP/Devices/PB';
 
 const SvgTest = () => {
-    const [received, setReceived] = useState([]);
-
-    listenMessageState(setReceived)
-
-    useEffect(() => {}, []);
-
     return (
         <>
             <Card>
@@ -27,7 +21,7 @@ const SvgTest = () => {
             <ReactSVG
                 src={filePathSvg}
                 beforeInjection={(svg) => {
-                    setValSvg(received, topicMqtt, svg);
+                    setValSvg(topicMqtt, svg);
                 }}
             />
         </>