如何每分钟调用一次 REACT 中仪表盘的 API
我在 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;
将数据获取逻辑移至单独的函数中,并使用
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);
}
}
以下是一个工作示例
为了使用
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
对于那些寻找功能组件的人。您可以通过创建 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;