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>;
  }
}