javascript - 如何在 REACT 中每分钟为仪表板调用 API

Question

我在 React 中制作了一个仪表板。它没有主动更新，没有按钮、字段或下拉菜单。它将部署在壁挂电视上以供观看。所有面板(总共 9 个)都通过 API 调用更新。初始调用(如下所示)有效，所有 JSON 数据都已获取，仪表板已初始更新。

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

我已经按照这里回答其他人问题的人的建议尝试在 componentDidMount() 中使用“setInterval”，但我收到错误消息“await 是一个保留字”。我已经阅读了有关 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

将数据获取逻辑移动到一个单独的函数中，并使用 componentDidMount 方法中的 setInterval 调用该函数，如下所示。

  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