如何解决SetInterval在渲染函数中同时调用5次
我正在使用库react-native-background-timer
,该库在后台运行一些任务。实际上,此功能运行良好,但是当我在render方法中对其进行控制台时,它将同时触发该功能5次。我只想打一次电话。有人可以帮我解决这个问题。
import BackgroundTimer from 'react-native-background-timer';
在渲染方法中:
BackgroundTimer.setInterval(() => console.log('@@@@ data has been rendered'),60000);
BackgroundTimer.clearInterval(6000)
解决方法
我对这个特定的库不熟悉,但是clearInterval()通常在应清除的setInterval()上带一个ID,而setInterval()将返回一个ID。
const intervalId = BackgroundTimer.setInterval(() => console.log('@@@@ data has been rendered'),60000);
BackgroundTimer.clearInterval(intervalHandle);
除非您使用render(),否则hooks可能不是用于此目的的方法。考虑使用其他lifecycle方法。我建议使用componentDidMount()调用setInterval()并使用componentWillUnmount()调用clearInterval()。
,回答评论,我认为这是真正的需要:
实际上叫了18次以上?我只想打电话(一分钟)
如果需要在组件加载时一次运行后台任务,则需要选择以下选项之一:
- 类组件
row1 ColumnName1 = Value1 ColumnName2 = Value2 ColumnName3 = Value3 ... #Process variables,continue row2 ColumnName1 = Value1 ColumnName2 = Value2 ColumnName3 = Value3 ...
的生命周期 - 功能组件
componentDidMount()
钩子
示例: https://codesandbox.io/s/elated-cloud-dgw8g?file=/src/App.js
类组件
useEffect
功能组件
class A extends React.Component {
componentDidMount() {
const interval = setInterval(() => {
console.log("A running");
clearInterval(interval);
},60000);
}
render() {
return <div> Hey from A </div>;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。