当用户点击按钮时启动定时器，React native

Question

我创建了一个函数，当用户点击启动按钮时，计时器将启动，但它不起作用。有人能告诉我为什么它不起作用吗？请

这就是我创建的功能

const [time,setTime] = useState(0)
const timeout = setInterval(() => {
if (time !== 60) {
setTime(prevState => prevState + 1);
}
}, 1000);
console.log(timeout);
return () => {
if (time == 60) {
clearTimeout(timeout);
}
};```

Answer 1

您可以将Timer State声明为60，而不是0和

const [state,updateState] = useState({timer:60})

然后在updateState:({timer: timer - 1})中调用此

Answer 2

回答您的问题：

为什么我的代码不能工作？

您的状态timer从0开始，因此永远不会到达if语句内部。

正如Matt U所指出的，你很可能想要使用setInterval，因为它每X毫秒(在你的情况下是1000毫秒(运行一次你传递的函数，直到你停止它

有关这方面的更多信息，请参阅以下内容：

• 设置超时：https://www.w3schools.com/jsref/met_win_settimeout.asp
• 设置间隔：https://www.w3schools.com/jsref/met_win_setinterval.asp

Yes IamFaded的回答应该在您的用例中起作用，尽管最好使用updateState的参数prevState(或您想称之为什么(。CCD_ 7将接收先前的值并使用该值来计算新的值。

const [state, updateState] = useState({ timer: 60 })
const interval = setInterval(() => {
if (state.timer > 0) {
updateState(prevState => { timer: prevState.timer - 1 });
}
}, 1000);

您可以在此处阅读有关功能更新的更多信息：https://reactjs.org/docs/hooks-reference.html#functional-更新

最后，一旦不再需要，您应该使用clearTimeout()或clearInterval()清除超时和/或间隔。

有关更多信息，请参阅以下内容：

• clearTimeout：https://www.w3schools.com/jsref/met_win_cleartimeout.asp
• clearInterval：https://www.w3schools.com/jsref/met_win_clearinterval.asp

p.S.

如果您的timer状态没有与任何其他状态耦合，我不会将其放入对象中。相反，我会做以下事情：

const [timer, setTimer] = useState(60)
const interval = setInterval(() => {
if (timer > 0) {
setTimer(prevTimer => prevTimer - 1 );
}
}, 1000);

这样你就不会有不必要的对象了。