小编典典

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

reactjs

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

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

正如人们在这里建议别人回答我所建议的那样,我尝试在componentDidMount()内部进行“
setInterval”操作,但出现错误“等待是保留字”。我已经阅读了有关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;

阅读 253

收藏
2020-07-22

共1个答案

小编典典

为了使用await,需要直接封装它的功能async。根据您的说法,如果要使用setIntervalinside
componentDidMount,则将异步添加到内部函数将解决此问题。这是代码,

 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

2020-07-22