时间戳

首页 > 解决方案 > ReactJS：如何渲染从 websocket 获得的值

reactjs - ReactJS：如何渲染从 websocket 获得的值

问题描述

我有以下代码。在控制台中我正确收到了这个：

在此处输入图像描述

每次这都正常工作，每次从 WebSocket 接收到新值时，都会出现新的控制台消息。

如何在p之后提取并渲染它的值VALUE:？每次产生事件时这个值会改变吗？

import React, { Component, Fragment } from "react";

class Dashboard extends Component {
  state = {
    dataFromServer: []
  };

  ws = new WebSocket("wss://stream.binance.com:9443/ws/xrpeur@trade");

  //Esperamos a que los daos sean cargados.
  componentDidMount() {
    this.ws.onopen = () => {
      // on connecting, do nothing but log it to the console
      console.log("connected");
    };

    this.ws.onmessage = evt => {
      // listen to data sent from the websocket server
      const message = JSON.parse(evt.data);
      this.setState({ dataFromServer: message });
      console.log(message);
    };

    this.ws.onclose = () => {
      console.log("disconnected");
      // automatically try to reconnect on connection loss
    };
  }

  render() {
    return (
      <Fragment>
        VALUE:{" "}
        {this.state.dataFromServer.map(valor => (
          <p>{valor.e}</p>
        ))}
      </Fragment>
    );
  }
}
export default Dashboard;

标签： reactjswebsocket

解决方案

from 的值JSON.parse(evt.data)是一个对象。删除您对地图的调用，然后直接访问属性this.state.dataFromServer。此外，它看起来像ealways "trade"，因此您不会看到该更新。

查看此代码框以查看它的工作原理。

推荐阅读