Javascript 从套接字映射到表

我对反应比较陌生-我有一个后端NodeJs代码从循环中的文件中读取，以逐行发出数据，在我的前端进行反应，我以这种方式逐对象接收它：

class Logs extends Component {
constructor(props) {
  super(props);

  this.state = {
    data: {}
  };
}

  componentDidMount() {
    socket.emit('initialize');
    socket.on('msg', res => {
      this.setState({data: res.msg});
    })
  }

示例JSON

{
  'command': {
    pitch: '2',
    roll: '2',
    yaw: '56',
  }
}

我无法将这些数据映射到表中的两列，这是我目前的代码：

renderTableData() {
    return  Object.values(this.state.data).map((item, i) => {
      const {pitch, roll, yaw} = item;
      return (
        <tr key={i}>
          <td>{Object.keys(this.state.data)}</td>
          <td>Pitch: {pitch},
              roll: {roll},
              Yaw: {yaw},
          </td>
        </tr>
      )
    })
  }

renderTableData（）{
返回Object.values（this.state.data）.map（（项，i）=>{
常数{俯仰、横滚、偏航}=项目；
返回(
{Object.keys（this.state.data）}
音高：{Pitch}，
滚动：{roll}，
偏航：{偏航}，
)
})
}

---

但是，它只在表中显示最后一个JSON对象数据，有没有办法合并所有JSON对象以便一起显示？谢谢。

当校准

此.setState（{data:res.msg}）时

将

数据

字段设置为等于

res.msg

，从而覆盖它

您希望

data

成为一个数组，并在收到消息时向其中添加一项：

构造函数（道具）{
超级（道具）；
此.state={
数据：[]
};
}
componentDidMount（）{
emit（'initialize'）；
socket.on（'msg'，res=>{
this.setState（{data:[…this.state.data，res.msg]}）；
})
}

另外，您可能不想再在第一列中打印

{Object.keys（this.state.data）}

，而是

{Object.keys（item）}