如何在 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;

原文由 Nacho Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为了使用 await ，直接包含它的函数需要是 async 。根据您的说法，如果您想在 setInterval 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

原文由 Aaditya Thakkar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将数据获取逻辑移动到一个单独的函数中，并使用 setInterval 在 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

原文由 Sajith Edirisinghe 发布，翻译遵循 CC BY-SA 3.0 许可协议