在React生命周期方法中设置获取数据的时间间隔

Question

我正在构建一个react应用程序，用于在rest api中显示数据。为了做到这一点，我使用了componentDidMount方法，并在没有任何混淆的情况下成功地获得了数据。我的代码片段如下所示。

componentDidMount() {
fetch('http://localhost:5000/sensors')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
sensors: json,
})
console.log(this.state.sensors);
});
}

我的要求是每40秒提取一次数据，并在不刷新网页的情况下更新表格。有人能帮我整理一下吗？

Answer 1

根据我的要求，由于我需要在40秒的时间间隔内加载表数据，我可以在componentWillMount((方法中使用Javascript内置方法setInterval((。如问题所示，render((之后的初始数据加载可以通过componentDidMount((成。

下面是我在40秒时间间隔内获取数据的代码。

componentWillMount(){
setInterval(() => {
fetch('http://localhost:5000/sensors')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
sensors: json,
})
console.log(this.state.sensors);
});
}, 40000);
}

Answer 2

据我所知，我认为在不重新渲染组件(不改变状态(的情况下更新状态是不可能的，因为react使用浅层渲染，它基本上会检查以前和现在的状态，如果它们不匹配，就会重新发现，如果你问我，要做到这一点，没有内存泄漏和大量错误，你可以

a( 使用一个单独的组件来获取和显示结果(正如您所说的表(，这样只有组件才能重新发布(并使用redux或contextAPI.无论您想要什么(，当用户呈现另一个页面以清除间隔时，您也可以使用componentWillUnmount(将被弃用(。(或者你可以使用钩子，只返回清除间隔的功能(

useEffect(()=>{
const interval = setInterval(()=>{
//fetch here
},40000);
return () => {
cleanInterval(interval)
}
},[tableData /*this is supposed to be the state value of the data you fetch*/])

b( 突变状态这不是一个好主意(这会导致更多的错误(