首页 > 解决方案 > 当数据来自mqtt时如何增加静态变量值?

问题描述

每次在 onMessageArrived() 中接收数据时,我想增加一个特定的静态变量。当新数据来自 mqtt 时,onMessageArrived 方法中的意思是,想要增加一个最初设置为 0 的静态变量。任何人都可以帮我实现这一点。我是 React Native 的初学者。提前致谢。

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 {
  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');
    // this.pushText('connected');
    console.log('connect');
  };

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



  onMessageArrived = message => {



    var msg = message.payloadString;
    var messageResult = `${msg}`;

    this.setState({ text: messageResult });

    console.log(this.state.text);
  };

  render() {
    // const { text } = this.state;
    // console.log(this.state);

    return (
      <View style={styles.container}>
        {/* {text.map(entry => <Text>{entry}</Text>)} */}
        {/* <Text>Data</Text>
        <Text>{this.state.text}</Text> */}

              <Pie
              radius={150}
              innerRadius={130}
              series={[this.state.text, 30, 60]}
              colors={['#EAD026', '#FAFAFA', '#EAD026']} 
              backgroundColor = '#FAFAFA'
              />
      </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,
  },
});

标签: androidreact-native-android

解决方案


您可以将先前的状态值附加到新值 -

let messageResult = `${msg}`;
let oldMessage = this.state.text;
let newMessageIntValue = parseInt(messageResult) + parseInt(oldMessage);
this.setState({text:newMessageIntValue});

注意 - 如果有任何其他问题,请告诉我,我刚刚将 MQTT 集成到 react native 中。


推荐阅读