React native 基于来自MQTT的订阅写入文本

因此，我有一个应用程序，接收来自树莓Pi的消息。这一切都很好，但我不知道如何根据订阅的主题输出文本。现在，每当状态发生变化时，我都会将所有主题一个接一个地打印出来。文本也不会在特定主题的新状态出现时消失，它们只是笨拙地组合成一个大字符串。任何帮助都将不胜感激。
这是包含订阅的客户端部分：

  constructor(){
    super();
    this.onMessageArrived = this.onMessageArrived.bind(this)
    this.onConnectionLost = this.onConnectionLost.bind(this)


    const client = new Paho.MQTT.Client('broker.hivemq.com', 8000, 'pi@njolac');
    client.onMessageArrived = this.onMessageArrived;
    client.onConnectionLost = this.onConnectionLost;
    client.connect({ 
      onSuccess: this.onConnect,
      useSSL: false ,
      onFailure: (e) => {console.log("here is the error" , e); }

    });

    this.state = {
      message: [''],
      client,
      messageToSend:'',
      isConnected: false,
    };

  }


  onMessageArrived(entry) {
    console.log("onMessageArrived:"+entry.payloadString);
    this.setState({message: [...this.state.message, entry.payloadString]});

  }


  onConnect = () => {
    const { client } = this.state;
    console.log("Connected!!!!");
    client.subscribe('Temperatura');
    client.subscribe('Vlaga');
    client.subscribe('Motor')
    this.setState({isConnected: true, error: ''})
  };

这是文本输出：

<Text style={styles.instructions}>
   Message: {this.state.message}
</Text>

消息：{this.state.Message}

---

任何帮助都意义重大。提前谢谢

我不确定该主题存储在此客户端的

条目

对象中的什么位置。我建议您

console.log（entry）

并查看打印的对象以确定主题存储的位置；它可能是

entry.destinationName

或

entry.topic

您的消息正在连接，因为您正在存储一个消息数组，并将每个新消息附加到此数组。然后在输出中将整个数组写入屏幕。只存储最新消息，或只显示数组的最后一个元素

以下代码用于说明，尚未调试/测试：

如果要显示每个主题的最新消息，最好将消息存储在字典中：

messageByTopic = {
    'Temperatura': 'temperaturaMessage',
    'Vlaga': 'vlagaMessage'
}

然后在输出中，针对每个主题（在字典中输入），编写最新消息：

<div>
{Object.keys(this.state.messageByTopic).map((topic) => {
    return (
      <h4>Topic: </h4> {topic}
      <Text style={styles.instructions}>
          Message: {this.state.messageByTopic[topic]}
      </Text>)
})
</div>

---

检查后，它是这样的：信息15:56关于消息驱动：Zemlja je vlazna信息15:56数组[“”，“22.312”，“Zemlja je vlazna”，“22.312”，“Zemlja je vlazna”，]信息16:00我没有得到任何关于它的具体信息。。。另外，应该提到，这是针对react native的：D@Njolac这看起来像您的消息数组。您的

条目.payloadString

包含“Zemlja je vlazna”和

此.state.messages

包含[“”、“22.312”、“Zemlja je vlazna”、“22.312”、“Zemlja je vlazna”、]。您只是将数据附加到messages数组中-要查看最新消息，您应该

this.setState（{message:[entry.payloadString]}）

。但是我猜你想为每个需要字典的主题存储最新消息。你能

console.log（entry）

让我们更好地理解entry对象吗。这将为我们提供消息来自哪个主题的线索。@Njolac关于如何存储消息，请看这个示例。除了用于提交新消息而不是套接字连接的

和

之外，它对代码的作用方式应该相同。这演示了如何使用和更新字典以按主题存储最新消息。如果您可以为我记录

条目

对象，那么我就可以查看您的其他查询。如果我错过了你申请的要点，请告诉我！这正是我对应用程序的设想。我将尝试实现它并发布结果。以下是条目对象：{“\u getDestinationName”：[函数匿名]，“\u getDuplicate”：[函数匿名]，“\u getPayloadBytes”：[函数匿名]，“\u getPayloadString”：[函数匿名]，“\u getQos”：[函数匿名]，“\u getRetained”：[函数匿名]，“\u getDestinationName”：[函数匿名]，“_setDuplicate”：[Function anonymous]，“_setQos”：[Function anonymous]，“_setRetained”：[Function anonymous]，}@Njolac我想对象的结尾已经被字符限制切断了。您介意将其粘贴到中，单击“创建新粘贴”，然后与我共享链接吗？

onMessageArrived(entry) {

    this.setState((state) => ({
        ...state.items,
        messageByTopic: {
            ...state.messageByTopic,
            `${entry.destinationName}`: entry.payloadString
         }
     }));

}