如何在REACT中每分钟为一个仪表板调用API

Question

我在React做了一个仪表板.它没有活动更新,没有按钮,字段或下拉菜单.它将部署在壁挂式电视上进行观看.所有面板(共9个)通过API调用进行更新.初始调用(如下所示)有效,并且将获取所有JSON数据并最初更新仪表板.

底线问题:我需要在初次调用后每30秒到1分钟调用一次API以检查更新.

我在componentDidMount()中尝试了"setInterval",正如人们在这里回答其他人的问题所建议的那样,我得到一个错误"await is a reserved words".我已经阅读了关于forceUpdate()的内容,这对于我的用例来说似乎是合乎逻辑的,因为facebook/react页面说的是什么.但是,我也在这里阅读以避免这种情况......

下面的代码是我正在使用的代码的简易版本.为简洁起见,我删除了许多组件和导入.任何帮助将不胜感激.

import React, { Component } from 'react';

import Panelone from './Components/Panelone';
import Paneltwo from './Components/Paneltwo';

class App extends Component {

  state = {
      panelone: [],
      paneltwo: []
    }

 async componentDidMount() {
      try {
        const res = await fetch('https://api.apijson.com/...');
        const blocks = await res.json();
        const dataPanelone = blocks.panelone;
        const dataPaneltwo = blocks.paneltwo;

        this.setState({
          panelone: dataPanelone,
          paneltwo: dataPaneltwo,
        })
      } catch(e) {
        console.log(e);
      }

  render () {
    return (
      <div className="App">
        <div className="wrapper">
          <Panelone panelone={this.state} />
          <Paneltwo paneltwo={this.state} />
        </div>
      </div>
    );
  }
}

export default App;

Answer 1

为了使用await，直接封闭它的函数需要是async。根据您的说法，如果您想使用setIntervalinside componentDidMount，将 async 添加到内部函数将解决问题。这是代码，

 async componentDidMount() {
          try {
            setInterval(async () => {
              const res = await fetch('https://api.apijson.com/...');
              const blocks = await res.json();
              const dataPanelone = blocks.panelone;
              const dataPaneltwo = blocks.paneltwo;

              this.setState({
                panelone: dataPanelone,
                paneltwo: dataPaneltwo,
              })
            }, 30000);
          } catch(e) {
            console.log(e);
          }
    }

此外，您应该考虑使用 react-timer-mixin，而不是全局使用 setInterval。https://facebook.github.io/react-native/docs/timers.html#timermixin

Answer 2

将数据提取逻辑移到单独的函数中，然后使用setIntervalin componentDidMount方法调用该函数，如下所示。

  componentDidMount() {
    this.loadData()
    setInterval(this.loadData, 30000);
  }

  async loadData() {
     try {
        const res = await fetch('https://api.apijson.com/...');
        const blocks = await res.json();
        const dataPanelone = blocks.panelone;
        const dataPaneltwo = blocks.paneltwo;

        this.setState({
           panelone: dataPanelone,
           paneltwo: dataPaneltwo,
        })
    } catch (e) {
        console.log(e);
    }
  }

以下是一个工作示例

https://codesandbox.io/s/qvzj6005w