在 React js 中做一次，然后每 15 秒做一次

Question

我有以下代码：

var Panel = React.createClass({

  getInitialState: function () {
    return {
      user_id: null,
      blogs: null,
      error: false,
      error_code: '',
      error_code: ''
    };
  },

  shouldComponentUpdate: function(nextProps, nextState) {
    if (nextState.error !== this.state.error ||
        nextState.blogs !== this.state.blogs ||
        nextState.error_code !== this.state.error_code
      ) {
      return true;
    }
  },

  componentDidMount: function() {
    var self = this;
    var pollingInterval = setInterval(function() {
      $.get(self.props.source, function(result) {
        if (self.isMounted()) {
          self.setState({
            error: false,
            error_code: '',
            error_message: '',
            blogs: result.user.blogs,
            user_id: result.user.id
          });
        }
      }.bind(self)).fail(function(response) {
        self.setState({
          error: true,
          error_code: response.status,
          error_message: response.statusText
        });
      }.bind(self));
    }, 1000);
  },

  render: function() { ... }

});

要关注的重要部分是 componentDidMount 这将每秒获取一次，无论是否有错误。假设有错误，渲染函数将显示适当的方法。因此，出于所有强烈的目的，这段代码完全按照我的意愿执行，它获取，如果失败，它会再次获取，直到成功。

但是我需要做一些改变，这就是我迷路的地方。我想说：Fetch 一次，通过或失败——没关系。然后在初始获取后每 15 秒重试一次 - 无论通过还是失败

我通常会启动一个 backbone 集合和路由器以及一个轮询助手来完成所有这些，但在这种特定情况下，不需要额外的开销。所以这就是我难住的地方。 我如何完成我想要达到的目标？

Answer 1

您应该能够稍微重构您的代码，以便能够以几种不同的方式调用您的轮询函数（例如手动调用，然后在指定的时间间隔调用）：

componentDidMount: function() {
  this.startPolling();
},

componentWillUnmount: function() {
    if (this._timer) {
      clearInterval(this._timer);
      this._timer = null;
    }
},

startPolling: function() {
    var self = this;
    setTimeout(function() {
      if (!self.isMounted()) { return; } // abandon 
      self.poll(); // do it once and then start it up ...
      self._timer = setInterval(self.poll.bind(self), 15000);
    }, 1000);
},

poll: function() {
    var self = this;
    $.get(self.props.source, function(result) {
      if (self.isMounted()) {
        self.setState({
          error: false,
          error_code: '',
          error_message: '',
          blogs: result.user.blogs,
          user_id: result.user.id
        });
      }
    }).fail(function(response) {
      self.setState({
        error: true,
        error_code: response.status,
        error_message: response.statusText
      });
    });
}

在 React js 中做一次，然后每 15 秒做一次

Do something once, then every 15 seconds in react js

javascript

reactjs