clearInterval 不起作用（已按照其他问题中的步骤操作）

Question

我知道这个问题很常见，我已经按照那里列出的解决方案进行操作，但没有成功，这就是为什么我提出了一个新问题。

我正在尝试在 React Native 上创建一个时间/时钟（如果有人有一个可以做到这一点的库，那也将不胜感激）并且目前正在这样创建它：

  const [time, setTime] = useState(moment(new Date()).format('hh:mm A (DD/MM/YYYY)'));

  function TimeView() {
    setTime(moment(new Date()).format('hh:mm A (DD/MM/YYYY)'));
  }

  const timeVar = setInterval(TimeView, 60000);

我试过 const, var, let for timeVar, 都没有成功

并在用户移动到下一个屏幕时关闭计时器，如下所示：

  <Button
      onPress={{   
        // navigation code here
            clearInterval(timeVar);
          }}
        >
          Take
 </Button>

我不确定我在这里做错了什么，我们将不胜感激。谢谢！

编辑： 根据 Uğur Eren 的建议，我改为定义了这个函数，但是定时器不能通过这个方法工作。

function Interval(fn, time) {
  const timer = useRef();

  this.start = function () {
    if (!this.isRunning()) {
      timer.current = setInterval(fn, time);
    }
  };

  this.stop = function () {
    clearInterval(timer);
    timer.current = false;
  };

  this.isRunning = function () {
    return timer !== false;
  };
}

Answer 1

试试这个。您应该在组件挂载时使用 setInterval。

 const [time, setTime] = useState(moment(new Date()).format('hh:mm A (DD/MM/YYYY)'));
 const [timeVar, setTimeVar] = useState<any>();

 useEffect(() => {
  const interval = setInterval(() => {
    setTime(moment(new Date()).format('hh:mm A (DD/MM/YYYY)'));
  }, 60000);
  setTimeVar(interval);
 }, []);

对于按钮，你必须传递一个函数来清除timeVar。

<Button
      onPress={() => {   
        // navigation code here
            if(timeVar) {
              clearInterval(timeVar);
            }
          }}
        >
          Take
 </Button>

Answer 2

如果您在这里偶然发现了答案，我希望这个对您有所帮助（对我有用）。

首先创建定时器useState变量，连同函数运行:

 const [time, setTime] = useState(moment(new Date()).format('hh:mm A (DD/MM/YYYY)'));


 function TimeView() {
    setTime(moment(new Date()).format('hh:mm A (DD/MM/YYYY)'));
  }

 const timeVar = useRef();

接下来，设置一个 useEffect 挂钩，以在首次加载页面时开始间隔：

  useEffect(() => {
    if (isFocused) {
      timeVar.current = setInterval(TimeView, 60000);
    }
  }, []);

然后将你的 clearInterval 放在你的按钮中：

<Button onPress={()=>clearInterval(timeVar.current)} title="Stop" />

就是这样，您的计时器已设置完毕！

clearInterval 不起作用（已按照其他问题中的步骤操作）

clearInterval isn't working (have followed the steps in the other questions)

javascript

android

react-native

setinterval

clearinterval