React Native使用sp-react-native-mqtt点击按钮发布MQTT消息报错如何解决

报错核心原因 #

• MQTT.createClient为异步方法，点击按钮时客户端实例可能还未完成初始化，mqttClient仍为null，直接调用方法会触发空值错误
• 即使实例已赋值，也可能未完成MQTT连接握手，未连接状态下调用publish方法会被库拦截报错
• 调用publish时只传入主题和内容两个参数，该库要求必须传全4个参数：主题、 payload、QoS等级、是否保留消息，参数缺失也会触发报错

修复方案 #

可以将客户端实例和连接状态存入React state，增加状态校验后再调用发布接口，示例代码如下：

import { useState, useEffect } from 'react';
import { Button, Alert } from 'react-native';
import MQTT from 'sp-react-native-mqtt';

const MqttTestPage = () => {
  // 存储MQTT客户端实例
  const [mqttClient, setMqttClient] = useState(null);
  // 存储连接状态
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    let tempClient = null;
    MQTT.createClient({
      uri: 'mqtt://test.mosquitto.org:1883',
      // 保证clientId唯一，避免重复连接被踢
      clientId: `rn_mqtt_${Math.random().toString(16).slice(2, 10)}`
    }).then(client => {
      tempClient = client;
      client.on('closed', () => {
        console.log('MQTT连接已关闭');
        setIsConnected(false);
      });
      client.on('error', msg => {
        console.log('MQTT错误', msg);
      });
      client.on('connect', () => {
        console.log('MQTT连接成功');
        setIsConnected(true);
        client.subscribe('/data', 0);
      });
      client.connect();
      setMqttClient(client);
    }).catch(err => console.log('创建MQTT客户端失败', err));

    // 页面卸载时主动断开连接，避免内存泄漏
    return () => {
      if (tempClient) {
        tempClient.disconnect();
      }
    }
  }, []);

  const handlePublishMsg = () => {
    // 调用前先校验状态
    if (!mqttClient || !isConnected) {
      Alert.alert('提示', 'MQTT未连接，请稍后再试');
      return;
    }
    // 传全4个参数
    mqttClient.publish('/data', '测试消息内容', 0, false);
  }

  return (
    <Button 
      title="发送MQTT消息"
      onPress={handlePublishMsg}
      // 未连接时禁用按钮，避免误触
      disabled={!isConnected}
    />
  )
}

推荐MQTT使用方案 #

• 如果你的MQTT broker支持WebSocket连接，优先选择纯JS实现的mqtt.js库，无原生依赖，适配性强，维护状态活跃，不需要处理iOS/Android原生适配问题
• 如果必须使用TCP协议连接MQTT，可以选择维护状态更稳定的原生封装类MQTT库，避免使用长期未更新的旧库

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