我正在使用 React Native 制作应用程序,但在制作倒数计时器时遇到了问题。
我需要使用 setInterval 来实现这一点,但我发现 setInterval 不会按照我的预期运行。
所以我使用了来自 this post 的自定义 Hook,代码如下:
import React, { useState, useEffect, useRef } from 'react';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
之后,我做了一个按钮来触发一个定时器:
const [leftTime, setTime] = useState(300000);
const triggerTimer = () => {
useInterval(() => setTime(leftTime - 1), 1000);
};
return (
<>
<Text>{leftTime}</Text>
<TouchableOpacity onPress={() => triggerTimer()}
<Text>Start Countdown!</Text>
</TouchableOpacity>
</>
);
但是,我收到一条错误消息,提示“钩子调用无效。钩子只能在函数组件的主体内部调用。'
我已经知道 Hooks 必须在函数组件的最顶部调用,但是有没有办法通过在应用程序中按下按钮来触发钩子?
另外,我想自动停止计时器,然后在状态 'leftTime' 变为 0 时做一些事情。