想要渲染通过 React 中的套接字接收到的数据

Posted 2023-02-16

【中文标题】想要渲染通过 React 中的套接字接收到的数据

【英文标题】：Want to render the data received via sockets in React

【发布时间】：2016-08-09 07:06:39

【问题描述】：

这是 React 代码：

var Dashboard = React.createClass(
  loadLineFromServer: function(line)
    console.log("inside loadlinefromserver");
    var socket = new WebSocket('ws://127.0.0.1:8000/');
    socket.onopen = function()
      console.log("websocket opened");
      var send_data1 = "Point A: " + line.x1 + "," + line.y1 +" \n";
      var send_data2 = "Point B: " + line.x2 + "," + line.y2;
      socket.send(send_data1 + send_data2);
    
    socket.onmessage = function(event)
      console.log("websocket on message");
      var websocket_data = event.data;
      this.setState(data: websocket_data)
      console.log(websocket_data);
    .bind(this),
    socket.onerror = function(e)
      console.log("error in websocket");
      console.log(e.message);
    
  ,
  handleFormSubmit: function(line)
    this.loadLineFromServer(x1: line.x1, y1: line.y1, x2: line.y1, y2: line.y2);
    var url = util.format('http://127.0.0.1:8000/api/line/');
    $.ajax(
      url: url,
      crossDomain: true,
      dataType: 'json',
      data: line,
      type: 'POST',
      success: function (data) 
        this.setState(data: data);
      .bind(this),
      error: function (xhr, status, err) 
        this.setState(data: line);
        console.error(url, status, err.toString());
      .bind(this)
    );
  ,
  getInitialState: function() 
    return data: [];
  ,
  componentWillMount: function() 
  ,
  render: function()
    return(
      <div className="dashboard">
        <Navbar inverse>
          <Navbar.Header>
            <Navbar.Brand>
              <a href="">TrainingInduct</a>
            </Navbar.Brand>
            <Navbar.Toggle/>
          </Navbar.Header>
        </Navbar>
        <Dashform onFormSubmit=this.handleFormSubmit />
        <h1>this.state.data</h1>
      </div>
    );
  
);

我没有找到屏幕上呈现的线坐标。 websocket_data 仅出现在控制台上，而我 setState 使其显示在屏幕上。关于如何渲染数据的任何线索？

Edit1：我错过了 this.setState(data: websocket_data)

之后的分号

现在，积分会暂时显示，但由于：

getInitialState: function() 
      return data: [];
 ,

点消失。有人可以帮助解决这个问题吗？？

【参考方案1】：

我发现了代码的问题。实际上由于 'POST' ajax 调用失败，错误方法被调用并且再次将数据设置为 NULL。我注释掉了那条线，现在它工作正常。

     error: function (xhr, status, err) 
     //  this.setState(data: line);
       console.error(url, status, err.toString());
     .bind(this)