如何在 REACT 中每分钟为仪表板调用一个 API [英] How to call an API every minute for a Dashboard in REACT

问题描述

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

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

我已经尝试在 componentDidMount() 中使用setInterval"，正如这里回答其他人问题的人所建议的那样，但我收到一个错误await 是一个保留字".我已经阅读了有关 forceUpdate() 的内容，考虑到 facebook/react 页面对此的描述，这对我的用例来说似乎是合乎逻辑的.但是，我也在这里阅读以远离那个......

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

import React, { Component } from 'react';从'./Components/Panelone'导入Panelone；从'./Components/Paneltwo'导入Paneltwo；类 App 扩展组件 {状态 = {面板:[]，面板二:[]}异步 componentDidMount() {尝试 {const res = await fetch('https://api.apijson.com/...');const blocks = await res.json();const dataPanelone = blocks.panelone;const dataPaneltwo = blocks.paneltwo;this.setState({面板:数据面板，面板二:数据面板二，})}赶上(e){控制台日志(e)；}使成为 () {返回 (<div className="应用程序"><div className="包装器"><Panelone panelone={this.state}/><Paneltwo paneltwo={this.state}/>

);}}导出默认应用程序；

解决方案

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

 异步 componentDidMount() {尝试 {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({面板:数据面板，面板二:数据面板二，})}, 30000);}赶上(e){控制台日志(e)；}}

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

I've made a dashboard in React. It has no active updating, no buttons, fields or drop-downs. It will be deployed on a wall TV for viewing. All panels (9 total) are updated through the API call. The initial call (seen below) works, and all JSON data is fetched and the dashboard is initially updated.

BOTTOM LINE PROBLEM: I need to call the API every 30 sec to 1 minute after the initial call to check for updates.

I have attempted "setInterval" inside the componentDidMount() as suggested by people on here answering others' questions and I get an error "await is a reserved word". I've read about forceUpdate() which seems logical for my use case given what the facebook/react page says about it. But, I've read on here as well to stay away from that...

The code below is a light version of the code I'm using. I've removed many of the components and imports for brevity's sake. Any help would be greatly appreciated.

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;

解决方案

In order to use await, the function directly enclosing it needs to be async. According to you if you want to use setInterval inside componentDidMount, adding async to the inner function will solve the issue. Here is the code,

 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);
          }
    }

Also instead of using setInterval globally, you should consider using react-timer-mixin. https://facebook.github.io/react-native/docs/timers.html#timermixin

这篇关于如何在 REACT 中每分钟为仪表板调用一个 API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！