草庐IT

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

coder 2024-07-28 原文

我有以下代码:

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

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

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

最佳答案

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

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
      });
    });
}

关于javascript - 在 React js 中做一次，然后每 15 秒做一次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28771098/

javascriptReacterrorfunctionselfreactjs

有关javascript - 在 React js 中做一次，然后每 15 秒做一次的更多相关文章

  1. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  2. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  3. ruby - 按值降序排列散列，然后按升序键入 ruby - 2

    我有这样的哈希trial_hash={"key1"=>1000,"key2"=>34,"key3"=>500,"key4"=>500,"key5"=>500,"key6"=>500}我按值降序排列:my_hash=trial_hash.sort_by{|k,v|v}.reverse我现在是这样理解的:[["key1",1000],["key4",500],["key5",500],["key6",500],["key3",500],["key2",34]]但我希望当值相同时按键的升序排序。我该怎么做？例如:上面的散列将以这种方式排序:[["key1",1000],["key3",500

  4. ruby-on-rails - Rake 任务仅调用一次时执行两次 - 2

    我写了一个非常简单的rake任务来尝试找到这个问题的根源。namespace:foodotaskbar::environmentdoputs'RUNNING'endend当在控制台中执行rakefoo:bar时，输出为:RUNNINGRUNNING当我执行任何rake任务时会发生这种情况。有没有人遇到过这样的事情？编辑上面的rake任务就是写在那个.rake文件中的所有内容。这是当前正在使用的Rakefile。requireFile.expand_path('../config/application',__FILE__)OurApp::Application.load_tasks这里

  5. ruby - 我怎样才能只写一次 "Text"并同时检查 path_info 是否包含 'A' ？ - 2

    -if!request.path_info.include?'A'%{:id=>'A'}"Text"-else"Text"“文本”写了两次。我怎样才能只写一次并同时检查path_info是否包含“A”？ 最佳答案 有两种方法可以做到这一点。使用部分，或使用content_forblock:如果“文本”较长，或者是一个重要的子树，您可以将其提取到一个部分。这会使您的代码变干一点。在给出的示例中，这似乎有点矫枉过正。在这种情况下更好的方法是使用content_forblock，如下所示:-if!request.path_info.inc

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby - 按数字(从大到大)然后按字母(字母顺序)对对象集合进行排序 - 2

    我正在构建一个小部件来显示奥运会的奖牌数。我有一个“国家”对象的集合，其中每个对象都有一个“名称”属性，以及奖牌计数的“金”、“银”、“铜”。列表应该排序:1.首先是奖牌总数2.如果奖牌相同，按类型分割(金>银>铜，即2金>1金+1银)3.如果奖牌和类型相同，则按字母顺序子排序我正在用ruby​​做这件事，但我想语言并不重要。我确实找到了一个解决方案，但如果感觉必须有更优雅的方法来实现它。这是我做的:使用加权奖牌总数创建一个虚拟属性。因此，如果他们有2个金牌和1个银牌，加权总数将为“3.020100”。1金1银1铜为“3.010101”由于我们希望将奖牌数排序为最高的，因此列表按降序排

  8. ruby-on-rails - 使用 Ruby 正确处理 Stripe 错误和异常以实现一次性收费 - 2

    我查看了Stripedocumentationonerrors，但我仍然无法正确处理/重定向这些错误。基本上无论发生什么，我都希望他们返回到edit操作(通过edit_profile_path)并向他们显示一条消息(无论成功与否)。我在edit操作上有一个表单，它可以POST到update操作。使用有效的信用卡可以正常工作(费用在Stripe仪表板中)。我正在使用Stripe.js。classExtrasController5000,#amountincents:currency=>"usd",:card=>token,:description=>current_user.email)

  9. ruby - 根据值然后键对ruby中的哈希进行排序 - 2

    如何在ruby​​中先根据值然后根据键对散列进行排序？例如h={4=>5,2=>5,7=>1}将排序为[[7,1],[2,5],[4,5]]我可以根据值进行排序h.sort{|x,y|x[1]y[1]}但我不知道如何根据值进行排序，然后在值相同时键入 最佳答案 h.sort_by{|k,v|[v,k]}这使用了Array的事实混入Comparable并定义逐元素。注意上面等价于h.sort_by{|el|el.reverse}相当于h.sort_by(&:reverse)这可能会或可能不会更具可读性。如果你知道Hashes一般都是先

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐