React Native提示Can't call setState on unmounted component警告如何解决

警告：Can't call setState on a component that is not yet mounted.
This is a no-op, but it might indicate a bug in your application.
Instead, assign to this.state directly or define a state = {};
class property with the desired state in the ConnectionMqtt component.

触发原因有两个核心可能：

1. 你定义的onMessageArrived回调内部调用了setState。MQTT连接建立速度极快的情况下，componentDidMount里刚初始化MQTT实例、绑定回调，还没等当前组件完成挂载流程，MQTT就推送了消息触发回调，这时候调用setState就会触发该警告。
2. 你自定义的ConnectionMqtt类内部在未挂载的生命周期（比如constructor）中调用了setState，不符合React类组件的状态初始化规范。

• 修复当前组件的回调逻辑：新增挂载状态标记，拦截未挂载时的状态更新操作，同时在组件卸载时销毁MQTT连接，避免内存泄漏

constructor(){
    super();
    // 新增挂载状态标记
    this.isMounted = false;
    this.onMessageArrived = this.onMessageArrived.bind(this)
    this.conn = null;
}

componentDidMount() {
    this.isMounted = true;
    this.conn = new ConnectionMqtt();
    this.conn.onMessageArrived = this.onMessageArrived;
}

componentWillUnmount() {
    this.isMounted = false;
    // 组件卸载时断开MQTT连接，清除回调
    if(this.conn) {
        this.conn.onMessageArrived = null;
        this.conn.disconnect?.();
    }
}

onMessageArrived(msg) {
    // 未挂载时直接返回，不执行状态更新
    if(!this.isMounted) return;
    // 这里再写你原来的setState逻辑
    this.setState({
        // 你的业务状态
    })
}

• 修复ConnectionMqtt类的状态初始化逻辑：如果是该类内部违规调用setState，按照警告提示，初始状态直接通过类属性声明，不要在constructor或未挂载阶段调用setState

class ConnectionMqtt extends Component {
    // 直接声明初始state，不要在constructor里调用setState赋值
    state = {
        // 你的初始状态配置
    }

    constructor() {
        super();
        // 不要在这里写this.setState(xxx)，初始状态直接写到上面的state类属性里即可
    }
}

内容的提问来源于stack exchange，提问作者Keltouma Indtaher