Javascript 使用react，可以制作一个使用axios、setInterval、setTimeout和map的应用程序？

我有一个问题，我开始怀疑它没有解决方案，除非我放弃React并返回jQuery。我想创建一个类似于或这些网站的应用程序，这些网站可以获取JSON数据并定期更新

我想制作一个react应用程序，使用axios每分钟使用setTimeout刷新一次数据，因为数据经常更改

  axiosFunc = () => {

    axios.get('https://api.warframestat.us/pc').then(results => {
      this.setState({
        alerts: results.data.alerts
      });

      setTimeout(this.axiosFunc,1000 * 60);
    })
  }
  componentDidMount() {
    this.axiosFunc();
  }

接下来，我需要使用map循环遍历警报阵列的对象，并根据活动对象的数据生成单个组件

render() {

    return (
      <main className="content">
        <header>{this.state.whichEvent.toUpperCase()}</header>

        {this.state.alerts.map(alert => {
          //Variables that pull time based data from the objects go here, and go into the component as props 
            <AlertsBox key={alert.id}/>
        })}
      </main>
    );
  }

所有这些都有效。我能够看到JSON中的动态数据，以及相应的时间。现在我只需要使用setInterval，以使计时器每秒都在滴答作响。这可能吗？我在这里问了一个类似的问题

---

但我再次开始怀疑这实际上是不可能的。是吗？

您需要在

axiosFunc

上使用

setInterval

，无需在网络请求中设置。下面的示例每5秒调用一次API并呈现格式化日期

类示例扩展了React.Component{
构造函数（）{
超级（）；
this.state={alerts:[]}；
}
axiosFunc=（）=>{
axios.get（）https://api.warframestat.us/pc）。然后（结果=>{
这是我的国家({
警报：results.data.alerts，
});
log（'已更新数据！'，结果）；
});
};
计时器=时间=>{
//您的计时器代码在这里，只是在这里打印示例数据。
const date=新日期（时间）；
返回`${date.getHours（）}:${date.getMinutes（）}:${date.getSeconds（）}`；
};
componentDidMount（）{
this.axiosFunc（）；
this.interval=setInterval（this.axiosFunc，5000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
如果（！this.state.alerts.length）{
返回；
}
//每次渲染时对警报进行排序。
const latest=this.state.alerts.sort（（a，b）=>{
返回新日期（b.激活）-新日期（a.激活）；
})[0];
返回{this.timer（latest.activation）}；
}
}
ReactDOM.render（，document.getElementById（'root'））
这绝对是可能的。正如你所说的，所有这些都起作用了——哪一部分给你带来了麻烦？你哪里有错误吗

就我个人而言，除了在这样的应用程序中做出反应之外，我还考虑使用Redux，因为我喜欢将数据的获取与数据的呈现分开，但这只是我个人的偏好。如果从
setTimeout
移动到
setInterval
会给您带来痛苦，那么我必须这样做。
您好，考虑到源JSON数据本身会发生变化（因此会自动更新），我如何跟上代码的变化？在这里，您硬编码了索引：return{this.timer（this.state.alerts[0].activation]），但如何保持它的动态性？每次获取新数据时，都会再次调用
render
，您可以动态地对这些数据更改做出反应。我在示例中添加了一个排序机制，但实际上您可以在其中执行任何操作。我只想添加，如果您使用
setTimeout
将一个API调用的结束和下一个API调用的开始用超时分开。在您的示例中使用
setInterval
时，只需每x时间单位调用一次API，而不管调用需要多长时间。有时设置5秒的时间间隔会有点问题，而你的通话时间比这要长。问题是我不知道如何用setInterval更新计时器函数。它给我一组数字，比如7，8，9，而不是计时器。我试图从组件内部更新状态，这会导致更多错误。@matany我猜您所指的一组数字是
setInterval
的返回值？
setInterval
的返回值是间隔ID-当您准备停止侦听时（您可能希望在卸载组件时执行此操作，如示例中所示），您可以将该间隔ID提供给
clearInterval
。
let timer = () => {
      //Extract the data from the original string
      //Convert the UTC to locale time

      let seconds = Math.round((this.state.eta/1000) % 60);
      let minutes = Math.floor( (this.state.eta/1000/60) % 60 );
      let hours = Math.floor( (this.state.eta/(1000*60*60)) % 24 );
      let days = Math.floor( this.state.eta/(1000*60*60*24) );

      return `${days >= 1? days + " days" : ""} ${hours >= 1? hours + " hrs" : ""} ${minutes} min ${seconds} sec`
    }