JSON 无法读取字段的值 [Vue.js]

Question

 data() {
    return {
        message: null,
        currentMessage: 'test',
   }

我有功能

valueOfMeasurement(measurement) {
        if (this.message instanceof Uint8Array) {
            var enc = new TextDecoder("utf-8");
            this.currentMessage = enc.decode(this.message);
            console.log("current message: ");
            console.log(this.currentMessage); //only this console.log returns value
            console.log(this.currentMessage["field" + measurement.fieldId]);
            console.log(this.currentMessage["field1"]);
            console.log(this.currentMessage[0]["field1"]);
            return currentMessage["field" + measurement.fieldId];
        } 

        else 
         return this.message.feeds[0]["field" + measurement.fieldId];
    }

功能简要说明：

我在<child-component :value=valueOfMeasurement(measurement)></child-component> 中调用它以将其值传递给子组件。 measurement 是 JSON 对象，我用它来识别使用了哪些组件和数据，

measurement.fieldId 的值为 1,2,3...

message 是JSON array，我通过REST 和MQTT Api 获得。我使用REST 获取当前值（因为MQTT 在读取任何数据之前有几分钟的延迟，然后@987654332 @ 在不刷新页面的情况下获取新值。我首先调用REST 以获取beforeMounted 中的初始值，然后我的message 具有值：

  {
   "channel":{
      "id":1500203,
      "name":"PlastenikDemo",
      "description":"Demo kanal za sistem nadzora plastenika",
      "latitude":"0.0",
      "longitude":"0.0",
      "field1":"TemperaturaVazduha",
      "field2":"VlaznostVazduha",
      "field3":"TemperaturaZemlje",
      "field4":"VlaznostZemlje",
      "field5":"IntenzitetSvjetla",
      "field7":"VerzijaPrograma",
      "field8":"Vrijemems",
      "created_at":"2021-09-08T07:37:06Z",
      "updated_at":"2021-09-28T12:51:38Z",
      "last_entry_id":17901
   },
   "feeds":[
      {
         "created_at":"2021-11-28T00:11:38Z",
         "entry_id":17901,
         "field1":"16.40000",
         "field2":"45.50000",
         "field3":"16.06250",
         "field4":"5.20000",
         "field5":"49.79300",
         "field7":"1",
         "field8":"390267909"
      }
   ]
}

这个用在上面函数的else部分，正常传值。

之后，在我的mounted() 中，我调用另一个从MQTT 协议获取消息的函数。在从该协议获得任何消息之前，它有大约 5 分钟的延迟。现在这是问题开始的地方。如果我把<div> {{this.message}} </div> 我从MQTT 收到普通消息作为JSON 对象：

    {
   "channel_id":1500203,
   "created_at":"2021-11-28T02:09:39Z",
   "entry_id":17924,
   "field1":"16.30000",
   "field2":"45.50000",
   "field3":"15.93750",
   "field4":"5.20000",
   "field5":"49.79300",
   "field6":null,
   "field7":"1",
   "field8":"397348953",
   "latitude":null,
   "longitude":null,
   "elevation":null,
   "status":null
}

但如果我在函数valueOfMeasurement(measurement) 内部console.log(this.message) 我得到Uint8Array 的数组。这就是为什么我做了this.currentMessage = enc.decode(this.message); 而当我console.log(this.currentMessage) 我得到正常的JSON object 但是，在相同的函数中，在它下面的行中，我尝试console.log(this.currentMessage["field1"] 并得到undefined。

另外，在我的<div>this.currentMessage</div> 中，当我重新启动页面时，我的屏幕上出现test，这没关系，因为我在data 中设置了它，但是当代码进入这个函数valueOfMeasurement(measurement) 和@987654355 时@ 我在控制台Reference error: currentMessage is not defined 中遇到错误，在同一个控制台中，接下来的 5 行是：

current message:

 {
   "channel_id":1500203,
   "created_at":"2021-11-28T02:09:39Z",
   "entry_id":17924,
   "field1":"16.30000",
   "field2":"45.50000",
   "field3":"15.93750",
   "field4":"5.20000",
   "field5":"49.79300",
   "field6":null,
   "field7":"1",
   "field8":"397348953",
   "latitude":null,
   "longitude":null,
   "elevation":null,
   "status":null
}

undefined undefined undefined.

这5个console.logs来自valueOfMeasurement(measurement)。

Answer 1

问题是enc.decode()返回的是字符串而不是JSON，所以需要加上JSON.parse

 if (this.message instanceof Uint8Array) {
            var enc = new TextDecoder("utf-8");
            this.currentMessage = JSON.parse(enc.decode(this.message));
            
            return this.currentMessage["field" + measurement.fieldId];
        }