Reactjs使用套接字：當套接字接收到消息時重新渲染

Question

我嘗試使用websockets實現類似於聊天應用程序的內容。但是當websocket得到消息時，沒有組件正在重新渲染。現在請查看我的代碼

# The main ancestor, chat application 
@Chat = React.createClass 
    componentWillMount: -> 
    @setState signals: [] # the list of signals received by websockets 

    socket = new WebSocket('ws://localhost:19108') 
    socket.onmessage = (event) => 
     @state.signals.push { message: event.data, direction: 'in' } 
     console.log @state.signals # it regularly write a message to console after receiving socket message 

    @setState socket: socket 
    render: -> 
    <div> 
     <div className="row"> 
     <div className="col-md-12"> 
      <SignalList signals={@state.signals} /> # I pass a signals here 
     </div> 
     </div> 
    </div> 

$ -> 
    React.render(<Chat />, document.getElementById('container')) 

信號列表嘗試只是爲了顯示的props變化，但沒有成功。這仍然是一個空數組

@SignalList = React.createClass 
    render: -> 
    <div>{ @props }</div> 

我想的WebSockets收到的每個消息後props重新描繪。我怎樣才能做到這一點？

Answer 1

你不應該發生變異@state直接，而是使用setState來排隊，一旦進行狀態更新，會導致組件重新呈現。大部分時間您應該考慮@state及其值爲只讀。

在你的情況下，更換

@state.signals.push { message: event.data, direction: 'in' } 

與

@setState signals: @state.signals.concat([{ message: event.data, direction: 'in' }]) 

不像Array::push，Array::concat還沒有變異源陣列，這意味着@state.signals保持不變的利益，直到狀態更新已執行。

Answer 2

在onmessage回調中，您直接操作state.signals而不是調用setState。

嘗試：

socket.onmessage = (event) => 
    signals = @state.signals 
    signals.push { message: event.data, direction: 'in' } 
    @setState signals: signals