从套接字映射到表答案

【问题标题】：Mapping into table from socket从套接字映射到表
【发布时间】：2020-11-09 19:04:19
【问题描述】：

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

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>
      )
    })
  }

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

【问题讨论】：

标签： javascript node.js json reactjs object

【解决方案1】：

在调用this.setState({data: res.msg}); 时，您将data 字段设置为等于res.msg，从而覆盖它。

您希望data 是一个数组，并在收到消息时向其中添加一个项目：

constructor(props) {
  super(props);

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

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

另外，您可能不想再在第一列中打印{Object.keys(this.state.data)}，而是{Object.keys(item)}

【讨论】：