Javascript react：在render（）中计时ajax请求

我读过一些类似的问题，但显然没有解决办法

我正在学习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>
        );
}

fetchData=（）=>{
变量url=”http://url.json";
$.ajax({
url:url，
数据类型：“jsonp”，
success:this.parseResponse，
错误：函数（req，err）{console.log（'API调用失败'+err）；}
})
}
render（）{
//this.fetchData（）；//此操作每1秒运行一次
设置超时（（）=>{
//this.fetchData（）；//这将无法按预期工作
console.log（“timer”）；//这按预期工作
}, 5000)
返回(
//这和预期的一样，但我不想要这个
);
}

为什么不在中调用您的

setTimeout

（或

setInterval

），它只在将组件添加到DOM时触发一次？在渲染方法中，每次有渲染时都要执行

setTimeout

，这可能是由除获取之外的其他事件引起的（尽管您没有显示足够的代码来确定）。

为什么不在中调用

setTimeout

（或

setInterval

），当组件被添加到DOM中时，哪个只触发一次？在render方法中，每次出现渲染时，都将执行

setTimeout

，这可能是由除获取之外的其他事件引起的（尽管您没有显示足够的代码来确定）.

首先，您需要知道，如果要与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=（）=>{
变量url=”http://url.json";
$.ajax({
url:url，
数据类型：“jsonp”，
success:this.parseResponse，
错误：功能（请求、错误）{
log（'API调用失败'+错误）；
}
})
}
组件安装（）{
//这将只调用一次
this.fetchData（）
this.interval=setInterval（（）=>{
this.fetchData（）
}, 10000)
}
组件将卸载（）{
//必须这样做，否则会缩短间隔时间
//即使组件不再存在，也将执行。
clearInterval（这个.interval）；
}
渲染（）{
返回(
...
)
}

---

---

如果在

render

方法中调用

fetchData

，您将面临进入无限循环的风险，因为如果在ajax完成时（或出于任何原因）更新

状态

然后执行

render

和

fetchData

方法，因此这将反复发生，最糟糕的是

fetchData

将每隔一段时间执行一次。

首先，您需要知道，如果要与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=（）=>{
变量url=”http://url.json";
$.ajax({
url:url，
数据类型：“jsonp”，
success:this.parseResponse，
错误：功能（请求、错误）{
log（'API调用失败'+错误）；
}
})
}
组件安装（）{
//这将只调用一次
this.fetchData（）
this.interval=setInterval（（）=>{
this.fetchData（）
}, 10000)
}
组件将卸载（）{
//必须这样做，否则会缩短间隔时间
//即使组件不再存在，也将执行。
clearInterval（这个.interval）；
}
渲染（）{
返回(
...
)
}

---

---

如果在

render

方法中调用

fetchData

，您将面临进入无限循环的风险，因为如果在ajax完成时（或出于任何原因）更新

状态

然后执行

render

，也执行

fetchData

方法，因此这种情况会反复发生，最糟糕的是

fetchData

将每隔一段时间执行一次。

您可能需要将

polling

逻辑移到React render挂钩中，即

componentDidMount

etcYour（）=>{this.fetchData（）}应按书面规定延迟5秒。渲染应该在这之前完成。您看到发生了什么？您可能希望将

轮询

逻辑移动到React render hook中，即，

componentDidMount

etcYour（）=>{this.fetchData（）}应按所写延迟5秒。渲染应该在这之前完成。你看到发生了什么？谢谢。但是，现在当我运行它时，它第一次执行是在计时器过期时。我需要在每次打开应用程序时运行它，然后每次计时器过期时都运行它。使用setTimeout（）只在第一次运行它，而在其他时间运行setInterval会是一种不好的做法吗？如果您在

componentDidMount

中调用

setTimeout

，这将是正常的，但我想问您为什么愿意使用

setTimeout

？如果你一个人打电话给

fetchData

不是更好吗？不管怎样，我已经改进了我的答案，谢谢。但是，现在当我运行它时，它第一次执行是在计时器过期时。我需要