(rocketmq-dashboard) branch rocketmq-studio updated: fix(producer): scope data to selected instance (#1325)

[lizhimin]

This is an automated email from the ASF dual-hosted git repository.

lizhimins pushed a commit to branch rocketmq-studio
in repository https://gitbox.apache.org/repos/asf/rocketmq-dashboard.git


The following commit(s) were added to refs/heads/rocketmq-studio by this push:
     new 21417a2b fix(producer): scope data to selected instance (#1325)
21417a2b is described below

commit 21417a2b2f7086f9ae7f866a1619afe8f95f3d4b
Author: 0 <1939455...@qq.com>
AuthorDate: Mon Aug 10 20:30:56 2026 +0800

    fix(producer): scope data to selected instance (#1325)
---
 web/src/pages/studio/Producer.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/studio/Producer.tsx 
b/web/src/pages/studio/Producer.tsx
index 7f2a782c..02250437 100644
--- a/web/src/pages/studio/Producer.tsx
+++ b/web/src/pages/studio/Producer.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   Alert,
   App,
@@ -63,6 +63,7 @@ const ProducerPage = () => {
   const { t } = useLang();
   const { message } = App.useApp();
   const fetchTopicFailedMessage = t('producer.fetchTopicFailed');
+  const queryRequestIdRef = useRef(0);
 
   useEffect(() => {
     let cancelled = false;
@@ -85,10 +86,13 @@ const ProducerPage = () => {
   }, []);
 
   const handleInstanceChange = (instanceId: string) => {
+    queryRequestIdRef.current += 1;
     setSelectedInstanceId(instanceId);
     setTopicList([]);
     setProducerGroups([]);
     setConnectionList([]);
+    setConnectionSummary(null);
+    setLoading(false);
     form.setFieldsValue({ selectedTopic: undefined, producerGroup: undefined 
});
   };
 
@@ -111,6 +115,7 @@ const ProducerPage = () => {
       })
       .catch(() => {
         if (!cancelled) {
+          setTopicList([]);
           message.error(fetchTopicFailedMessage);
         }
       });
@@ -151,6 +156,7 @@ const ProducerPage = () => {
       message.error('Select an instance before querying producer 
connections.');
       return;
     }
+    const requestId = ++queryRequestIdRef.current;
     setLoading(true);
     try {
       const result = await queryProducerConnection(
@@ -158,6 +164,7 @@ const ProducerPage = () => {
         values.selectedTopic,
         values.producerGroup,
       );
+      if (requestId !== queryRequestIdRef.current) return;
       const connections = result.connectionSet;
       setConnectionList(connections);
       setConnectionSummary(result.summary);
@@ -165,9 +172,13 @@ const ProducerPage = () => {
         message.info(t('producer.noConnections'));
       }
     } catch {
-      message.error(t('producer.fetchConnectionFailed'));
+      if (requestId === queryRequestIdRef.current) {
+        message.error(t('producer.fetchConnectionFailed'));
+      }
     } finally {
-      setLoading(false);
+      if (requestId === queryRequestIdRef.current) {
+        setLoading(false);
+      }
     }
   };