在React中打印出JSON数据

我正在使用cockpit-project API来获取有关打印出来的环境服务器的物理状态。这就是我的React代码：

"use strict";

const output = document.getElementById("output");
const jsonData = [output];

class CockpitTest extends React.Component {
  getOutput(data) {
    output.append(document.createTextNode(data));
  }

  async componentDidMount() {
    await cockpit.spawn(["/usr/local/bin/statusdemo"]).stream(this.getOutput);

    console.log(output);
  }

  render() {
    return (
      <ul>
        {jsonData.map((data, i) => (
          <li key={i}>{data.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<CockpitTest />, document.getElementById("root"));

我在这里想要做的是将这些数据打印到我的组件中，并为程序编写if语句，以对不同的JSON响应采取不同的行动。

顺便说一下，这是我的控制台输出的方式output：

<pre id=​"output">​"{
    "psu1": {
        "status": "ok",
        "volt": "233"
    },
    "psu2": {
        "status": "ok",
        "volt": "233"
    },
    "mgmt1": {
        "link_status": "no link",
        "bps": 0
    },
    "mgmt2": {
        "link_status": "1000Mbit",
        "bps": 12984
    },
    "data1": {
        "link_status": "100000Mbit",
        "bps": 1003567
    },
    "data2": {
        "link_status": "100000Mbit",
        "bps": 4055645
    }
}

"</pre>​

我在控制台窗口中看到了JSON数据，但在我的组件中却看不到，它只是空白。任何帮助，将不胜感激！