我已经在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;
为了使用await,需要直接封装它的功能async。根据您的说法,如果要使用setIntervalinside componentDidMount,则将异步添加到内部函数将解决此问题。这是代码,
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