javascript - Reactjs 使用套接字 : rerender when socket receive a message

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 在执行状态更新之前保持不变。