开发者问题收集

如何每分钟调用一次 REACT 中仪表盘的 API

2018-02-03
100184

我在 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;
3个回答

将数据获取逻辑移至单独的函数中,并使用 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

Sajith Edirisinghe
2018-02-03

为了使用 await ,直接包含它的函数需要是 async 。根据您的说法,如果您想在 componentDidMount 中使用 setInterval ,则向内部函数添加 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

Aaditya Thakkar
2018-02-03

对于那些寻找功能组件的人。您可以通过创建 setInterval 并在 useEffect 钩子中调用它来每隔 n 次更新状态。最后在清理函数中调用 clearInterval 方法

import React, { useEffect, useState } from "react";

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

function App() {
  const [state, setState] = useState({
    panelone: [],
    paneltwo: [],
  });

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

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

  useEffect(() => {
    const intervalCall = setInterval(() => {
      getData();
    }, 30000);
    return () => {
      // clean up
      clearInterval(intervalCall);
    };
  }, []);
  return (
    <div className="App">
      <div className="wrapper">
        <Panelone panelone={state} />
        <Paneltwo paneltwo={state} />
      </div>
    </div>
  );
}

export default App;
Faiz Hameed
2021-12-28