如何使用react和axios每秒返回一次值？

Question

我正在尝试创建一个从具有axios的服务器获取数据的站点，然后每秒更新一次最终内容。

这是ajax请求。

axiosFunc = () => {

    axios.get('https://api.warframestat.us/pc').then(results => {
      this.setState({
        alerts: results.data.alerts
      });
      setTimeout(this.axiosFunc,1000 * 60);
    })
  }
  componentDidMount() {
    this.axiosFunc();
  }

然后我返回有条件渲染的组件（AlertsBox）并传入数据。它们根据时间与开始和结束的时间进行比较。

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

    {this.state.alerts.map(alert => {
      let enddate = alert.expiry.substring(0,10);
      let endtime = alert.expiry.substring(11,19);

      let startdate = alert.activation.substring(0,10);
      let starttime = alert.activation.substring(11,19);

      let endAlert = new Date(`${enddate} ${endtime} UTC`).toLocaleString();

      let startAlert = new Date(`${startdate} ${starttime} UTC`).toLocaleString();

      let endNumber = Date.parse(endAlert);
      let startNumber = Date.parse(startAlert);

      return Date.now() > startNumber && Date.now() < endNumber ?
        <AlertsBox
          deadline={endAlert}
          activate={startAlert}
          timeOne={enddate}
          timeTwo={endtime}
          timeThree={startdate}
          timeFour={starttime}
          image={alert.mission.reward.thumbnail}
          reward={alert.mission.reward.itemString}
          credits={alert.mission.reward.credits}
          type={alert.mission.type}
          sector={alert.mission.node}
          key={alert.id}/>
          :null
    })}
  </main>
);
}

接下来，在组件中，我创建一个计时器功能来显示一次。

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`
}

最后，在渲染区域内，我渲染返回函数

<figcaption>

   {timer()}

</figcaption>

这会渲染一次。如果我这样做......

{setInterval(timer(), 1000)}

该功能不起作用，并提供错误的值。如何让它给出正确的值？