如何阻止UseEffect运行外部代码

Question

我是React Native的新手。我有一个秒表，每10毫秒在屏幕上重新呈现一次。然而，我在useEffect钩子之外编写的函数也每十秒钟被调用一次。例如，我有一个函数，我只想在按下按钮时运行。在useEffect中没有调用该函数，但它每10毫秒运行一次，即使没有按下按钮。我怎样才能避免这个问题?

useEffect(() => {
let interval = null;
if (timerOn) {
let startTime = new Date().getTime();
interval = setInterval(() => {
var currentTime = new Date().getTime() - startTime;
setTime(
`${padToTwo(Math.floor((currentTime / 3600000) % 24))}:${padToTwo(
Math.floor((currentTime / 60000) % 60)
)}:${padToTwo(Math.floor((currentTime / 1000) % 60))}:${padToTwo(
currentTime % 100
)}`
);
}, 10);
} else {
clearInterval(interval);
}
return () => clearInterval(interval);
}, [timerOn]);

Answer 1

可以使用其他状态

const [useOne,setUseOne] = useState<boolean>(true)
useEffect(() => {
if (useOne) {
let interval = null;
if (timerOn) {
let startTime = new Date().getTime();
interval = setInterval(() => {
var currentTime = new Date().getTime() - startTime;
setTime(
`${padToTwo(Math.floor((currentTime / 3600000) % 24))}:${padToTwo(
Math.floor((currentTime / 60000) % 60)
)}:${padToTwo(Math.floor((currentTime / 1000) % 60))}:${padToTwo(
currentTime % 100
)}`
);
}, 10);
} else {
clearInterval(interval);
}
}

return () => clearInterval(interval);
}, [timerOn,useOne]);

....
<Button title="off" onPress={() => useOne(false)} />