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>

我希望 props 在 websockets 收到每条消息后重新呈现。我该怎么做？

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

Reactjs 使用套接字：当套接字收到消息时重新呈现

Reactjs working with sockets: rerender when socket receive a message

javascript

websocket

coffeescript

reactjs