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甚至的建议，我反而定义了这个函数，但是定时器不通过这个方法工作。

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" />

就是这样，你的计时器都设置好了!