React-Rails API 轮询

React-Rails API Polling

我是 React 的新手,我已经 the official React tutorials on how to use React as a standalone service and have just gone through this tutorial 在 Rails 应用程序中使用 react-rails gem,其中大部分我已经适合正是我所需要的。我遇到的问题是我需要为我的小 React 页面实现某种简单的 API 轮询,但我似乎无法在任何地方找到有关如何在 react-[=24 中最好地实现它的文档=].

在 React 教程中它告诉我们在声明数据源时使用 pollinterval = 2000 每 2000 毫秒轮询一次源。我尝试按如下方式实现它,但无济于事:

@Records = React.createClass
    getInitialState: ->
      $.ajax
        method: 'GET'
        url: '/records'
        dataType: 'JSON'
        success: (response) ->
          records: response
      pollinginterval: 2000
    ...

不幸的是,当我加载页面时,不仅实际上没有显示任何内容,而且它似乎根本没有查询数据库 - 即使是最初也是如此。这让我相信这不是 AJAX 调用/设置轮询间隔的正确位置,但我的谷歌搜索没有任何特别有用的东西。

我建议您在 componentDidMount 而不是 getInitialState 中执行 ajax 调用。

查看本教程以加载 ajax 数据。 https://facebook.github.io/react/tips/initial-ajax.html

这种方法怎么样?

@Records = React.createClass
  getInitialState: ->
    # `this.state.records` is empty now, but will be loaded by AJAX
    {
      records: [] 
    }

  componentDidMount: ->
    # Ping every 2s
    @_recordsInterval = setInterval =>
        @_loadRecords()
      , 2000
    # Load initial data: 
    @_loadRecords()

  componentWillUnmount: -> 
    # clean up loose ends: 
    clearInterval(@_recordsInterval)
    @_recordsRequest?.abort()

  # ...

  _loadRecords: ->
   # Fetch records from the server and store it as `this.state.records`
   @_recordsRequest = $.get "/records", (data) => 
     @setState(records: data)