React Native中MQTT接收消息时实现静态变量自增的方法求助

嘿，作为React Native新手，这个需求其实很好实现！我们只需要给你的MqttLog类添加一个静态变量，然后在onMessageArrived方法里完成自增操作就行，具体步骤如下：

步骤1：定义静态变量 #

在你的MqttLog类内部、constructor之前，添加一个初始值为0的静态变量——这个变量属于整个类，不会随组件实例重新渲染而重置：

export default class MqttLog extends Component {
  // 定义静态变量，初始值为0，用于记录消息接收次数
  static messageCount = 0;

  constructor(props) {
    // 原构造器代码保持不变
    super(props);
    const client = new Paho.MQTT.Client('iot.eclipse.org', 443, 'uname');
    client.connect({ onSuccess: this.onConnect, useSSL: true });
    client.onConnectionLost = this.onConnectionLost;
    client.onMessageArrived = this.onMessageArrived;
    this.state = {
      text: '10',
      client,
    };
  }

步骤2：在消息到达时执行自增操作 #

修改onMessageArrived方法，每次收到新消息时让静态变量自增。因为静态变量属于类，我们可以直接通过MqttLog.messageCount来访问并更新它：

onMessageArrived = message => {
  var msg = message.payloadString;
  var messageResult = `${msg}`;
  this.setState({ text: messageResult });
  
  // 静态变量自增
  MqttLog.messageCount++;
  // 打印当前计数，方便调试查看
  console.log('已接收消息总数：', MqttLog.messageCount);
  
  console.log(this.state.text);
};

完整修改后的代码 #

下面是整合了上述修改的完整代码，你可以直接替换原代码使用：

import React, { Component } from 'react';
import init from 'react_native_mqtt';
import { AsyncStorage, StyleSheet, Text, View } from 'react-native';
import Pie from 'react-native-pie';

init({
  size: 10000,
  storageBackend: AsyncStorage,
  defaultExpires: 1000 * 3600 * 24,
  enableCache: true,
  sync: {},
});

export default class MqttLog extends Component {
  // 新增：静态变量，记录消息接收次数，初始值0
  static messageCount = 0;

  constructor(props) {
    super(props);
    const client = new Paho.MQTT.Client('iot.eclipse.org', 443, 'uname');
    client.connect({ onSuccess: this.onConnect, useSSL: true });
    client.onConnectionLost = this.onConnectionLost;
    client.onMessageArrived = this.onMessageArrived;
    this.state = {
      text: '10',
      client,
    };
  }

  onConnect = () => {
    const { client } = this.state;
    client.subscribe('WORLD');
    console.log('connect');
  };

  onConnectionLost = responseObject => {
    if (responseObject.errorCode !== 0) {
      var connectionLostMessage = `connection lost: ${responseObject.errorMessage}`;
      console.log(connectionLostMessage);
    }
  };

  onMessageArrived = message => {
    var msg = message.payloadString;
    var messageResult = `${msg}`;
    this.setState({ text: messageResult });
    
    // 新增：静态变量自增操作
    MqttLog.messageCount++;
    console.log('当前已接收消息次数：', MqttLog.messageCount);
    
    console.log(this.state.text);
  };

  render() {
    return (
      <View style={styles.container}>
        <Pie
          radius={150}
          innerRadius={130}
          series={[this.state.text, 30, 60]}
          colors={['#EAD026', '#FAFAFA', '#EAD026']}
          backgroundColor='#FAFAFA'
        />
        {/* 可选：如果需要在UI上显示计数，可以添加这段Text组件 */}
        <Text style={{ marginTop: 20, fontSize: 18 }}>
          已接收消息次数：{MqttLog.messageCount}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
  },
  gauge: {
    position: 'absolute',
    width: 100,
    height: 100,
    alignItems: 'center',
    justifyContent: 'center',
  },
  gaugeText: {
    backgroundColor: 'transparent',
    color: '#000',
    fontSize: 24,
  },
});

小提示 #

• 静态变量messageCount是属于MqttLog类的，即使组件重新渲染，它的值也会保持，不会被重置。
• 如果你的应用中有多个MqttLog实例，这个静态变量会被所有实例共享，计数是全局的。如果你需要每个实例单独计数，那应该把变量放到组件的state或者实例属性（比如this.messageCount）里。
• 我在render方法里加了一个可选的Text组件，用来在UI上显示当前计数，如果你不需要可以直接删掉。

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