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

Question

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

我正在学习 React 并构建一个应该每 10/15 分钟连接到一个 API 的应用程序。 要连接，我正在触发一个 ajax 请求。 但是我需要每 10 分钟触发一次 ajax 请求，因此我需要某种计时器。 如果我在 render() 方法中调用 fetchData 方法，ajax 请求将每 1 秒调用一次。 即使我在渲染中放置了一个 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>
  )
}

---

如果您在render方法中调用fetchData ，您将面临进入无限循环的风险，因为如果您在 ajax 完成时（或出于任何原因）更新state ，那么render将被执行并且fetchData方法也会被执行，所以这将一遍又一遍地发生，最糟糕的是fetchData将间隔执行。

Answer 2

为什么不在componentDidMount中调用setTimeout （或setInterval ），它只会在组件添加到 DOM 时触发一次？ 在您的渲染方法中，您将在setTimeout渲染时设置超时，这可能是由您的 fetch 之外的其他事件引起的（尽管您没有显示足够的代码来确定）。