React + AWS Amplify PubSub重复接收消息问题求助

问题原因 #

你的GaugesComponent组件每次渲染时都会执行PubSub.subscribe('test/pub')并绑定新的回调函数。React组件在状态更新、父组件重渲染等场景下会重新执行函数体，这就导致同一个MQTT主题被多次订阅。当设备或MQTT客户端发布消息时，所有已创建的订阅都会触发next回调，最终表现为控制台重复打印同一条消息。

修复方案 #

使用React的useEffect钩子包裹订阅逻辑，确保仅在组件挂载时创建一次订阅，并在组件卸载时取消订阅，避免重复订阅和内存泄漏。

修改后的Device Page.js代码 #

import { Amplify } from 'aws-amplify';
import awsconfig from './../aws-exports';
import { PubSub } from 'aws-amplify';
import { AWSIoTProvider } from '@aws-amplify/pubsub/lib/Providers';
import { useEffect } from 'react';

Amplify.configure(awsconfig);

Amplify.addPluggable(new AWSIoTProvider({
    aws_pubsub_region: 'xx-xxxxxxx-x',
    aws_pubsub_endpoint: 'wss://<My endpoint from AWS IoT>/mqtt',
}));

function GaugesComponent({ id }) {
    useEffect(() => {
        // 创建订阅并保存订阅实例
        const subscription = PubSub.subscribe('test/pub').subscribe({
            next: data => {
                console.log(data.value);
            },
            error: error => console.error(error),
            complete: () => console.log('Done'),
        });

        // 组件卸载时取消订阅
        return () => subscription.unsubscribe();
    }, []); // 空依赖数组：仅在组件首次挂载时执行一次

    return (
        // ... 你的原有组件内容
    );
}

export default GaugesComponent;

关键说明 #

• 空依赖数组[]确保useEffect内的订阅逻辑只在组件挂载时执行一次，不会随组件重渲染重复创建订阅。
• 返回的清理函数会在组件卸载时调用unsubscribe()，及时释放资源，避免无效订阅继续占用连接。

内容的提问来源于stack exchange，提问作者Nishuthan S