Question

我已经阅读了一些类似的问题，但显然没有解决方案。

我正在学习React并构建一个应该每10/15分钟连接到一个API的应用程序。为了连接，我正在发出一个ajax请求。但是我需要每10分钟触发一次ajax请求，因此我需要某种计时器。如果我在render（）方法中调用方法fetchData，则每隔约1秒调用一次ajax请求。即使我在渲染中放置了一个setTimeout（），这也不适用于ajax请求（但它可以与其他操作一起使用，例如console.log（））。

有什么想法吗？基本上我需要每10分钟不断重复ajax请求，而无需用户点击按钮或与应用程序交互。启动应用程序时应触发第一个请求。谢谢！

fetchData = () => {

    var url = "http://url.json";
    $.ajax({
        url: url,
        dataType: "jsonp",
        success : this.parseResponse,
        error : function(req, err){ console.log('API call failed ' + err); }
    })
}

render(){
    //this.fetchData(); //this works but every 1 second
    setTimeout(() => {
        //this.fetchData(); //this won't work as expected
        console.log("timer"); //this works as expected
    }, 5000)

    return(
        <div>
            <button onClick={this.fetchData}></button> //this works as expected but I don't want this
        </div>
        );
}

Answer 1

首先，您需要知道，如果您要与api进行互动，则需要使用componentDidMount方法进行调用这是推荐的做法。

然后，要进行连续通话，您应使用setInterval代替setTimeout。

fetchData = () => {
  var url = "http://url.json";
  $.ajax({
    url: url,
    dataType: "jsonp",
    success: this.parseResponse,
    error: function (req, err) {
      console.log('API call failed ' + err);
    }
  })
}
componentDidMount () {
  // This will be called just once
  this.fetchData()

  this.interval = setInterval(() => {
    this.fetchData()
  }, 10000)
}
componentWillUnmount () {
  // It's necessary to do this otherwise the interval
  // will be executed even if the component is not present anymore. 
  clearInterval(this.interval);
}
render () {
  return (
    <div>
      ...
    </div>
  )
}

如果您在fetchData方法中调用render，则可能会进入无限循环，因为如果您在完成ajax时更新state（或出于任何原因））然后render将被执行，而fetchData方法也会被执行，所以这将一遍又一遍地发生，并使其最差fetchData将会间隔执行。

Answer 2

为什么不在componentDidMount中调用setTimeout（或setInterval），这只会在组件添加到DOM时触发一次？在你的渲染方法中，每次有渲染时你都会setTimeout，这可能是由你的获取之外的其他事件引起的（虽然你没有显示足够的代码以确定）。

反应：在render（）中计时ajax请求

2 个答案: