Möchten Sie die empfangenen Daten über Sockets machen in React

Question

Hier ist der Code Reagieren:

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

Ich finde nicht, dass die Linie auf dem Bildschirm gerendert Koordinaten. Die websocket_data erscheint nur auf der Konsole, während ich setState so einstelle, dass sie auf dem Bildschirm angezeigt wird. Gibt es Hinweise darauf, wie die Daten gerendert werden sollen?

Edit1: vermisste ich das Semikolon nach this.setState ({Daten: websocket_data})

Nun werden die Punkte angezeigt bekommen für einen Moment aber wieder durch:

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

Die Punkte diappear. Kann jemand helfen, dieses Problem zu umgehen?

Answer 1

Ich fand das Problem mit dem Code. Aufgrund des Fehlers des 'POST'-Ajax-Aufrufs wurde die Fehlermethode aufgerufen und die Daten wurden wieder auf NULL gesetzt. Ich habe diese Zeile auskommentiert und jetzt funktioniert es gut.

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