Question

我正在使用https://www.npmjs.com/package/mqtt和React。在我的组件中，我有：

componentDidMount:function(){

        client.subscribe('test/topic');
        client.on('message',function(topic,message){

            if(topic==='test/topic'){
                console.log(message.toString());
                this.setState({value:parseInt(message.toString())});


            }
        }.bind(this));

    },
componentWillUnmount:function(){
        client.unsubscribe('test/topic');
    },

所以我订阅组件将在卸载时挂载和取消订阅的主题。但是，当我在我的应用程序中转到另一个视图并返回时，我会收到每条mqtt消息的警告：

Warning: setState(...): Can only update a mounted or mounting component.
This usually means you called setState() on an unmounted component.
This is a no-op.

我做错了什么？

Answer 1

当声明didMount方法时，将调用回调函数。将回调移动到自己的方法中。您也不需要绑定this。

Answer 2

我曾经遇到过类似的问题。从那以后，我为我的套接字侦听器移回了旧的 useEffect 语法，现在我似乎没有收到这些警告。不确定这是解决方案，但希望它有所帮助！

useEffect(() => {
    client.on('message' () => {
        // update state
    }
    client.on('disconnect', () => {
        // update state
    }
})

反应mqtt订阅setState警告

2 个答案: